/* Footer Component Styles - extracted for W3C validation */

/* ── Collapsible nav ── */
.fnav a:nth-child(n+4) { display:none; }
.fnav--open a:nth-child(n+4) { display:block; }
.fnav-toggle {
    background:none; border:none; cursor:pointer;
    font-size:10px; font-weight:600; color:rgba(255,255,255,0.25);
    padding:4px 0; margin-top:4px; transition:color 0.15s;
    font-family:inherit; letter-spacing:0.02em;
}
.fnav-toggle:hover { color:#c8a951; }

/* ── Social bar above footer-bottom ── */

/* ── Visitor counter ── */
.visitor-counter {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
}
.vc-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255,255,255,0.35);
}
.vc-item svg { opacity: 0.5; }
.vc-num {
    font-size: 14px;
    font-weight: 700;
    color: #c8a951;
    font-variant-numeric: tabular-nums;
}
.vc-label {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.vc-sep {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.1);
}
.footer-social-bar {
    display:flex; justify-content:center; gap:6px; flex-wrap:wrap;
    padding:14px 0; margin-bottom:0;
    border-top:1px solid rgba(255,255,255,0.06);
}
.footer-social-bar__link {
    display:flex; align-items:center; gap:5px;
    padding:5px 10px; border-radius:6px;
    border:1px solid rgba(255,255,255,0.06);
    background:rgba(255,255,255,0.03);
    color:rgba(255,255,255,0.35);
    font-size:10px; font-weight:600;
    text-decoration:none;
    transition:all 0.2s;
}
.footer-social-bar__link svg { width:13px; height:13px; flex-shrink:0; color:var(--sc); stroke:var(--sc); }
.footer-social-bar__link:hover {
    background:color-mix(in srgb, var(--sc) 12%, transparent);
    border-color:color-mix(in srgb, var(--sc) 25%, transparent);
    color:var(--sc);
    transform:translateY(-1px);
}

@media (width < 480px) {
    .footer-social-bar__link span { display:none; }
    .footer-social-bar__link { padding:8px; }
    .footer-social-bar { gap:6px; }
}

.chat-btns {
    position: fixed;
    bottom: 78px;
    right: 24px;
    z-index: 9990;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.chat-btns__btn {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease;
    position: relative;
}
.chat-btns__btn:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}
.chat-btns__btn:active {
    transform: scale(0.95);
}
.chat-btns__btn--wa {
    background: #25D366;
}
.chat-btns__btn--wa:hover { background: #1ebe5a; }
.chat-btns__btn--fb {
    background: #0084FF;
}
.chat-btns__btn--fb:hover { background: #006fd6; }

/* Tooltip on hover */
.chat-btns__btn::after {
    content: attr(title);
    position: absolute;
    right: 56px; top: 50%;
    transform: translateY(-50%) translateX(6px);
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 12px; font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.chat-btns__btn:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

@media (max-width: 480px) {
    .chat-btns { bottom: 70px; right: 16px; gap: 8px; }
    .chat-btns__btn { width: 40px; height: 40px; }
    .chat-btns__btn svg { width: 18px; height: 18px; }
    .chat-btns__btn::after { display: none; }
}

/* ═══ Mobile: unified floating buttons stack ═══ */
@media (max-width: 768px) {
    .chat-btns {
        bottom: auto;
        top: auto;
        right: 14px;
        bottom: 74px;
        gap: 10px;
    }
    .chat-btns__btn {
        width: 44px; height: 44px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    }
    .scroll-top {
        right: 14px !important;
        bottom: 20px !important;
        width: 42px !important; height: 42px !important;
    }
}
@media (max-width: 480px) {
    .chat-btns {
        right: 12px;
        bottom: 66px;
        gap: 8px;
    }
    .chat-btns__btn {
        width: 40px; height: 40px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    }
    .scroll-top {
        right: 12px !important;
        bottom: 16px !important;
        width: 38px !important; height: 38px !important;
    }
    .scroll-top svg { width: 16px !important; height: 16px !important; }
    .scroll-top__ring { inset: -2px; border-width: 1.5px; }
}

.search-trigger {
    background:none; border:none; color:rgba(255,255,255,0.6); cursor:pointer;
    padding:8px; display:flex; align-items:center; transition:color 0.2s;
}
.search-trigger:hover { color:#c8a951; }

/* ═══ Spotlight Modal ═══ */
.spotlight { position:fixed; inset:0; z-index:9999; display:flex; align-items:flex-start; justify-content:center; padding-top:min(20vh, 160px); opacity:0; visibility:hidden; transition:all 0.2s; }
.spotlight.open { opacity:1; visibility:visible; }
.spotlight__bg { position:absolute; inset:0; background:rgba(10,10,20,0.6); backdrop-filter:blur(4px); }
.spotlight__box {
    position:relative; width:92%; max-width:580px;
    background:#fff; border-radius:16px;
    box-shadow:0 24px 80px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.08);
    transform:translateY(-12px) scale(0.98); transition:transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    overflow:hidden;
}
.spotlight.open .spotlight__box { transform:translateY(0) scale(1); }

.spotlight__input-wrap {
    display:flex; align-items:center; gap:12px; padding:16px 20px;
    border-bottom:1px solid #f0f0f0;
}
.spotlight__input-wrap svg { width:20px; height:20px; color:#bbb; flex-shrink:0; }
.spotlight__input {
    flex:1; border:none; outline:none; font-size:17px; font-family:inherit;
    color:#1a1a2e; background:none;
}
.spotlight__input::placeholder { color:#ccc; }
.spotlight__kbd { font-size:11px; color:#ccc; border:1px solid #e8e8e8; border-radius:5px; padding:3px 8px; font-family:inherit; }

.spotlight__results { max-height:420px; overflow-y:auto; }
.spotlight__results:empty { display:none; }

.sp-label { padding:12px 20px 6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:#aaa; }
.sp-item {
    display:flex; align-items:center; gap:14px; padding:10px 20px;
    text-decoration:none; color:#333; transition:background 0.1s; cursor:pointer;
}
.sp-item:hover, .sp-item.sp-active { background:#f7f7f9; }
.sp-item__icon {
    width:40px; height:40px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
}
.sp-item__icon--cat { background:#f3f3f5; }
.sp-item__icon--cat svg { width:16px; height:16px; color:#888; }
.sp-item__icon img { width:100%; height:100%; object-fit:cover; }
.sp-item__info { flex:1; min-width:0; }
.sp-item__name { font-size:14px; font-weight:600; color:#1a1a2e; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-item__meta { font-size:12px; color:#aaa; margin-top:1px; }
.sp-item__arrow { color:#ccc; font-size:14px; flex-shrink:0; }
.sp-item:hover .sp-item__arrow { color:#c8a951; }

.sp-divider { height:1px; background:#f0f0f0; margin:6px 0; }
.sp-footer { padding:12px 20px; text-align:center; border-top:1px solid #f0f0f0; }
.sp-footer a { font-size:13px; font-weight:600; color:#1a1a2e; text-decoration:none; }
.sp-footer a:hover { color:#c8a951; }
.sp-empty { padding:48px 20px; text-align:center; color:#bbb; font-size:14px; }
.sp-empty span { display:block; font-size:32px; margin-bottom:12px; opacity:0.4; }
.sp-hint { padding:10px 20px; display:flex; gap:16px; justify-content:center; border-top:1px solid #f0f0f0; }
.sp-hint span { font-size:11px; color:#ccc; }
.sp-hint kbd { font-size:10px; background:#f5f5f5; border:1px solid #e8e8e8; border-radius:3px; padding:1px 5px; color:#999; }

.scroll-top {
    position:fixed; bottom:24px; right:24px; z-index:9989;
    width:44px; height:44px; border-radius:50%;
    border:none; padding:0;
    background:linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color:#c8a951; cursor:pointer;
    box-shadow:0 4px 20px rgba(15,23,42,0.35), 0 0 0 0 rgba(200,169,81,0);
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transform:translateY(16px) scale(0.8);
    transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-top svg { width:18px; height:18px; transition:transform 0.2s; }
.scroll-top--show { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.scroll-top:hover {
    background:linear-gradient(135deg, #c8a951 0%, #dbc474 100%);
    color:#0f172a;
    box-shadow:0 6px 24px rgba(200,169,81,0.4), 0 0 0 4px rgba(200,169,81,0.15);
    transform:translateY(-2px) scale(1.05);
}
.scroll-top:hover svg { transform:translateY(-2px); }
.scroll-top:active { transform:translateY(0) scale(0.95); }

.scroll-top__ring {
    position:absolute; inset:-3px; border-radius:50%;
    border:2px solid rgba(200,169,81,0.2);
    animation:scroll-ring 2s ease-in-out infinite;
    pointer-events:none;
}
@keyframes scroll-ring {
    0%, 100% { transform:scale(1); opacity:0.4; }
    50% { transform:scale(1.15); opacity:0; }
}

#pqModal{animation:pqFadeIn .2s ease}
@keyframes pqFadeIn{from{opacity:0}to{opacity:1}}
#pqBox{animation:pqSlideUp .25s ease}
@keyframes pqSlideUp{from{opacity:0;transform:translateY(-45%)}to{opacity:1;transform:translateY(-50%)}}
.pq-preview-btn{
    position:absolute;top:50%;left:50%;z-index:3;
    transform:translate(-50%,-50%);
    width:48px;height:48px;border-radius:50%;
    background:rgba(26,26,46,0.9);backdrop-filter:blur(6px);
    border:2px solid #c8a951;
    color:#c8a951;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    opacity:0;transition:all 0.25s;
    box-shadow:0 4px 20px rgba(0,0,0,0.35);
}
.product-card:hover .pq-preview-btn{opacity:1;transform:translate(-50%,-50%) scale(1.1);box-shadow:0 6px 25px rgba(200,169,81,0.4)}
.pq-preview-btn:hover{background:#c8a951;color:#1a1a2e;transform:translate(-50%,-50%) scale(1.2)}
.pq{display:grid;grid-template-columns:280px 1fr;gap:24px}
.pq__gallery{position:relative;border-radius:10px;overflow:hidden;background:#f8f9fb;aspect-ratio:1}
.pq__gallery img{width:100%;height:100%;object-fit:contain}
.pq__thumbs{display:flex;gap:6px;margin-top:8px}
.pq__thumb{width:48px;height:48px;border-radius:6px;border:2px solid transparent;cursor:pointer;overflow:hidden;background:#f8f9fb}
.pq__thumb.active{border-color:#1a1a2e}
.pq__thumb img{width:100%;height:100%;object-fit:cover}
.pq__thumb--video{position:relative;background:#1a1a2e;display:flex;align-items:center;justify-content:center}
.pq__info{display:flex;flex-direction:column;gap:8px}
.pq__cat{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#c8a951}
.pq__name{font-size:1.2rem;font-weight:700;color:#1a1a2e;line-height:1.3}
.pq__rating{display:flex;align-items:center;gap:4px;font-size:13px;color:#c8a951}
.pq__rating span{color:#ddd}.pq__rating .on{color:#c8a951}
.pq__price{font-size:1.1rem;font-weight:700;color:#1a1a2e}
.pq__price-old{font-size:.85rem;color:#999;text-decoration:line-through;margin-left:8px;font-weight:400}
.pq__price--sale{color:#c0392b}
.pq__price-badge{display:inline-block;background:#c0392b;color:#fff;font-size:10px;font-weight:800;padding:2px 7px;border-radius:4px;margin-left:8px;vertical-align:middle}
.pq__desc{font-size:13px;color:#555;line-height:1.7;max-height:120px;overflow-y:auto}
.pq__sku{font-size:11px;color:#aaa}
.pq__actions{display:flex;gap:8px;margin-top:auto;padding-top:12px}
.pq__btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border-radius:8px;font-size:13px;font-weight:600;text-decoration:none;transition:all .2s;border:none;cursor:pointer;font-family:inherit}
.pq__btn--primary{background:#1a1a2e;color:#c8a951}.pq__btn--primary:hover{background:#2c2c54}
.pq__btn--buy{background:#c8a951;color:#1a1a2e}.pq__btn--buy:hover{background:#b8993d}
.pq__btn--outline{background:transparent;color:#1a1a2e;border:1.5px solid #e4e4e8}.pq__btn--outline:hover{border-color:#1a1a2e}
@media(max-width:600px){.pq{grid-template-columns:1fr}.pq__gallery{max-height:280px}}