/* ═══════════════════════════════════════════════════
   shop.css — Readings shop grid & card styles
   PREMIUM IMMERSIVE REDESIGN
   ═══════════════════════════════════════════════════ */

/* ── Shop Hero / Masthead ── */
.shop-hero {
    position: relative;
    text-align: center;
    padding: 2.5rem 1.25rem 1.75rem;
    margin: -1.25rem -1.25rem 0;
    overflow: hidden;
}
.shop-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 30%, rgba(107, 76, 154, 0.18), transparent 60%),
        radial-gradient(ellipse 60% 50% at 70% 70%, rgba(212, 175, 55, 0.08), transparent 50%),
        radial-gradient(ellipse 50% 40% at 20% 60%, rgba(107, 76, 154, 0.1), transparent 50%);
    pointer-events: none;
}
.shop-hero::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(to top, var(--color-bg-primary, #0a0a0f), transparent);
    pointer-events: none;
}

/* Floating stars / particles */
.shop-hero__stars {
    position: absolute; inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.shop-hero__star {
    position: absolute;
    width: 2px; height: 2px;
    background: rgba(212, 175, 55, 0.6);
    border-radius: 50%;
    animation: shopStarTwinkle 3s ease-in-out infinite;
}
@keyframes shopStarTwinkle {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
}

.shop-hero__icon {
    position: relative;
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.3));
    animation: shopHeroFloat 4s ease-in-out infinite;
}
@keyframes shopHeroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.shop-hero__title {
    position: relative;
    font-family: var(--font-display);
    font-size: 1.6rem; font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-text-primary, #f5f5f5);
    margin: 0 0 0.35rem;
    text-shadow: 0 2px 20px rgba(107, 76, 154, 0.3);
}
.shop-hero__sub {
    position: relative;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--color-text-secondary, #b8b8c8);
    margin: 0;
    line-height: 1.5;
}
@media (min-width: 768px) {
    .shop-hero { padding: 3rem 2rem 2rem; }
    .shop-hero__title { font-size: 1.9rem; }
}

/* ── Divider Line ── */
.shop-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.15), transparent);
    margin: 0.5rem 0 1.25rem;
}

/* ── Online Indicator ── */
.pj-online-bar {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.65rem 1rem;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.08), rgba(46, 204, 113, 0.03));
    border: 1px solid rgba(46, 204, 113, 0.15);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}
.pj-online-bar::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(46, 204, 113, 0.04), transparent);
    animation: onlineSweep 3s ease-in-out infinite;
}
@keyframes onlineSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.pj-online-dot {
    position: relative;
    width: 10px; height: 10px;
    background: #2ecc71;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(46, 204, 113, 0.6), 0 0 12px rgba(46, 204, 113, 0.3);
    animation: pj-pulse 2s ease-in-out infinite;
}
@keyframes pj-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(46, 204, 113, 0.6), 0 0 12px rgba(46, 204, 113, 0.3); }
    50% { opacity: 0.7; box-shadow: 0 0 10px rgba(46, 204, 113, 0.8), 0 0 20px rgba(46, 204, 113, 0.4); }
}
.pj-online-text {
    position: relative;
    font-family: var(--font-display);
    font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: #2ecc71;
}

/* ── Premium Savings Banner ── */
.shop-premium-banner {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 0.7rem 1rem;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(107, 76, 154, 0.06));
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.shop-premium-banner::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.06), transparent);
    animation: onlineSweep 4s ease-in-out infinite;
}
.shop-premium-banner__text {
    position: relative;
    font-family: var(--font-body);
    font-size: 0.85rem; color: var(--color-gold);
    line-height: 1.4;
}
.shop-premium-banner__cta {
    position: relative;
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-bg-primary);
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light, #f4d03f));
    padding: 0.4rem 1rem;
    border-radius: 20px;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 700;
    transition: transform 0.2s, box-shadow 0.2s;
}
.shop-premium-banner__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

/* ── Category Filter Bar ── */
.shop-filters {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    justify-content: center;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
}
.shop-filter-btn {
    font-family: var(--font-display);
    font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-text-secondary, #b8b8c8);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}
.shop-filter-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(107, 76, 154, 0.05));
    opacity: 0;
    transition: opacity 0.25s;
}
.shop-filter-btn:hover::before { opacity: 1; }
.shop-filter-btn:hover {
    border-color: rgba(212, 175, 55, 0.25);
    color: var(--color-gold);
}
.shop-filter-btn--active {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(107, 76, 154, 0.08));
    border-color: rgba(212, 175, 55, 0.4);
    color: var(--color-gold);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.08);
}
.shop-filter-btn--active::before { opacity: 0; }

/* ── Featured Reading Banner ── */
.shop-featured {
    position: relative;
    display: flex; align-items: center; gap: 1.25rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(107, 76, 154, 0.12), rgba(212, 175, 55, 0.06));
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.shop-featured:hover {
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 8px 40px rgba(107, 76, 154, 0.15), 0 0 30px rgba(212, 175, 55, 0.05);
}
.shop-featured::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.03), transparent);
    animation: onlineSweep 5s ease-in-out infinite;
}
.shop-featured__badge {
    position: absolute; top: 0; right: 0;
    font-family: var(--font-display);
    font-size: 0.48rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--color-bg-primary, #0a0a0f);
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light, #f4d03f));
    padding: 0.25rem 0.8rem 0.25rem 0.6rem;
    border-radius: 0 0 0 8px;
    font-weight: 700;
}
.shop-featured__thumb {
    width: 80px; height: 80px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}
.shop-featured__thumb-inner {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
}
.shop-featured__info {
    flex: 1;
    position: relative;
    min-width: 0;
}
.shop-featured__title {
    font-family: var(--font-display);
    font-size: 0.95rem; font-weight: 600;
    color: var(--color-text-primary, #f5f5f5);
    margin: 0 0 0.25rem;
}
.shop-featured__desc {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-secondary, #b8b8c8);
    margin: 0 0 0.4rem;
    line-height: 1.4;
}
.shop-featured__price {
    font-family: var(--font-display);
    font-size: 0.9rem; font-weight: 700;
    color: var(--color-gold);
}
.shop-featured__arrow {
    font-size: 1.2rem;
    color: var(--color-gold);
    opacity: 0.5;
    transition: opacity 0.2s, transform 0.2s;
    position: relative;
}
.shop-featured:hover .shop-featured__arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* ── Shop Grid ── */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    padding-bottom: calc(var(--nav-height, 64px) + 2rem);
}
@media (min-width: 768px) {
    .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (min-width: 1100px) {
    .shop-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Product Card ── */
.shop-card {
    position: relative;
    background: var(--color-bg-card, rgba(20, 20, 35, 0.8));
    border: 1px solid rgba(212, 175, 55, 0.06);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.35s,
                box-shadow 0.35s;
    /* Stagger entrance animation */
    opacity: 0;
    transform: translateY(20px);
    animation: shopCardEnter 0.5s ease-out forwards;
}
@keyframes shopCardEnter {
    to { opacity: 1; transform: translateY(0); }
}

.shop-card:hover {
    transform: translateY(-6px);
    border-color: rgba(212, 175, 55, 0.25);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(212, 175, 55, 0.06),
        0 0 60px rgba(107, 76, 154, 0.04);
}

/* Glow line at top of card on hover */
.shop-card::before {
    content: '';
    position: absolute; top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.5), transparent);
    opacity: 0;
    transition: opacity 0.35s;
    z-index: 2;
}
.shop-card:hover::before { opacity: 1; }

/* Thumbnail area */
.shop-card__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.shop-card__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-card:hover .shop-card__thumb img {
    transform: scale(1.08);
}

/* Rich gradient placeholder per category */
.shop-card__thumb-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    overflow: hidden;
}
.shop-card__thumb-placeholder::before {
    content: '';
    position: absolute; inset: 0;
    opacity: 0.5;
    transition: opacity 0.4s;
}
.shop-card:hover .shop-card__thumb-placeholder::before {
    opacity: 0.7;
}
/* Floating ambient particles inside placeholder */
.shop-card__thumb-placeholder::after {
    content: '';
    position: absolute;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1), transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: cardAmbientPulse 4s ease-in-out infinite;
}
@keyframes cardAmbientPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.7; }
}

/* Category-specific placeholder gradients */
.shop-card__thumb-placeholder[data-cat="tarot"]::before {
    background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 40%, #1a1030 100%);
}
.shop-card__thumb-placeholder[data-cat="love"]::before {
    background: linear-gradient(135deg, #2a0a1e 0%, #3d1530 40%, #1a0818 100%);
}
.shop-card__thumb-placeholder[data-cat="psychic"]::before {
    background: linear-gradient(135deg, #0a1a2e 0%, #152040 40%, #0a0f20 100%);
}
.shop-card__thumb-placeholder[data-cat="spiritual"]::before {
    background: linear-gradient(135deg, #1a1a0a 0%, #2a2818 40%, #141408 100%);
}
.shop-card__thumb-placeholder[data-cat="energy"]::before {
    background: linear-gradient(135deg, #0a1a18 0%, #0f2a25 40%, #08140f 100%);
}
.shop-card__thumb-placeholder[data-cat="career"]::before {
    background: linear-gradient(135deg, #1a150a 0%, #2e2510 40%, #14100a 100%);
}

.shop-card__thumb-placeholder .shop-card__placeholder-icon {
    position: relative;
    z-index: 1;
    font-size: 3rem;
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.3));
    animation: cardIconFloat 5s ease-in-out infinite;
}
@keyframes cardIconFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.03); }
}

/* Category badge on thumbnail */
.shop-card__cat {
    position: absolute; top: 0.6rem; left: 0.6rem;
    font-family: var(--font-display);
    font-size: 0.48rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--color-gold);
    background: rgba(10, 10, 15, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 20px;
    padding: 0.2rem 0.6rem;
    backdrop-filter: blur(8px);
    z-index: 2;
}

/* Bestseller / Popular badge */
.shop-card__badge {
    position: absolute; top: 0.6rem; right: 0.6rem;
    font-family: var(--font-display);
    font-size: 0.45rem; letter-spacing: 0.12em; text-transform: uppercase;
    font-weight: 700;
    color: var(--color-bg-primary, #0a0a0f);
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light, #f4d03f));
    border-radius: 20px;
    padding: 0.2rem 0.55rem;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

/* Card body */
.shop-card__body {
    padding: 0.85rem 1rem 1rem;
}
.shop-card__title {
    font-family: var(--font-display);
    font-size: 0.88rem; font-weight: 600;
    color: var(--color-text-primary, #f5f5f5);
    margin: 0 0 0.3rem;
    line-height: 1.3;
}
.shop-card__desc {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-muted, #7a7a8c);
    line-height: 1.45;
    margin: 0 0 0.6rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Rating row */
.shop-card__rating {
    display: flex; align-items: center; gap: 0.3rem;
    margin-bottom: 0.5rem;
}
.shop-stars {
    display: inline-flex; gap: 1px;
    color: var(--color-gold);
    font-size: 0.7rem;
}
.shop-stars--empty { color: rgba(212, 175, 55, 0.25); }
.shop-card__review-count {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--color-text-muted, #7a7a8c);
}

/* Price row */
.shop-card__price-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: auto;
}
.shop-card__prices {
    display: flex; align-items: baseline; gap: 0.5rem;
    flex-wrap: wrap;
}
.shop-card__price {
    font-family: var(--font-display);
    font-size: 1.05rem; font-weight: 700;
    color: var(--color-gold);
}
.shop-card__price--original {
    font-size: 0.78rem; font-weight: 400;
    color: var(--color-text-muted, #7a7a8c);
    text-decoration: line-through;
}
.shop-card__savings {
    font-family: var(--font-display);
    font-size: 0.48rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.2);
    border-radius: 20px;
    padding: 0.15rem 0.5rem;
}

/* Quick view hint on hover */
.shop-card__view {
    font-family: var(--font-display);
    font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-gold);
    opacity: 0;
    transition: opacity 0.3s;
}
.shop-card:hover .shop-card__view { opacity: 0.7; }

/* ── Section Labels ── */
.shop-section-label {
    font-family: var(--font-display);
    font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--color-text-muted, #7a7a8c);
    margin-bottom: 1rem;
    display: flex; align-items: center; gap: 0.75rem;
}
.shop-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(212, 175, 55, 0.1), transparent);
}

/* ── Quick-add button on cards ── */
.shop-card__quick-add {
    margin-top: 0.6rem;
}
.shop-card__add-btn {
    display: block; width: 100%;
    font-family: var(--font-display);
    font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
    font-weight: 700;
    color: var(--color-bg-primary, #0a0a0f);
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light, #f4d03f));
    border: none; border-radius: 6px;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    text-align: center;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
    opacity: 0;
}
.shop-card:hover .shop-card__add-btn {
    opacity: 1;
}
.shop-card__add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}
.shop-card__add-btn--in-cart {
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.25);
    opacity: 1;
}
.shop-card__add-btn--in-cart:hover {
    box-shadow: none;
    transform: none;
}
/* Always show on mobile (no hover) */
@media (max-width: 768px) {
    .shop-card__add-btn { opacity: 1; }
}

/* ── Empty state ── */
.shop-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-muted, #7a7a8c);
    font-family: var(--font-body);
    font-size: 0.9rem;
}