/* =========================================================
   SHOP VIEW — CATALOGUE TABS + REFINEMENTS
   ========================================================= */

.anm-shop-catalog-tabs{
    position:sticky;
    top:var(--anm-shop-catalog-tabs-top, 0px);
    z-index:40;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    padding:8px 10px;
    margin:0 0 8px;
    background:rgba(8,14,24,.92);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    box-shadow:0 10px 26px rgba(0,0,0,.16);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.anm-shop-catalog-tab{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:42px;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    background:rgba(255,255,255,.05);
    color:#f8fafc;
    font-size:13px;
    font-weight:800;
    line-height:1.1;
    text-align:center;
    text-decoration:none;
    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.anm-shop-catalog-tab:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,.09);
}

.anm-shop-catalog-tab.is-active{
    background:rgba(34,197,94,.16);
    border-color:rgba(34,197,94,.45);
}

.anm-shop-catalog-tab__count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:22px;
    height:22px;
    margin-left:6px;
    padding:0 6px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    font-size:11px;
    font-weight:900;
}

.anm-shop-refinements{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    margin:8px 0 12px;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.anm-shop-refinements::-webkit-scrollbar{
    display:none;
}

.anm-shop-refinement{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:7px 12px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    background:rgba(255,255,255,.05);
    color:inherit;
    font-size:12px;
    font-weight:700;
    line-height:1;
    text-decoration:none;
    white-space:nowrap;
}

.anm-shop-refinement.is-active{
    border-color:rgba(34,197,94,.45);
    background:rgba(34,197,94,.14);
}


/* =========================================================
   SHOP NAVIGATION — LOCATION / SHARE ACTIONS
   ========================================================= */

.anm-page-shortcuts .anm-shop-nav-action{
    position:static!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    z-index:auto!important;

    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:38px!important;
    margin:0!important;
    padding:4px 2px!important;

    align-self:stretch;
    justify-self:stretch;
    box-sizing:border-box;

    display:grid!important;
    place-items:center!important;
}

.anm-page-shortcuts .anm-shop-nav-action__label{
    display:block;
    max-width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:8.5px;
    font-weight:800;
    line-height:1.1;
}


/* =========================================================
   SHOP SHORTCUTS
   3 / 4 / 5 shortcut versions use the SAME sticky behaviour.
   ========================================================= */

.anm-shop-three-shortcuts,
.anm-shop-four-shortcuts,
.anm-shop-five-shortcuts{
    position:sticky;
    top:0;
    z-index:1000;
}


/* Preserve the same position when sticky-showcase JS marks
   the navigation as sticky. */

.anm-shop-three-shortcuts.is-showcase-sticky,
.anm-shop-four-shortcuts.is-showcase-sticky,
.anm-shop-five-shortcuts.is-showcase-sticky{
    top:0!important;
    margin-top:0!important;
    margin-bottom:0!important;
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

@media(prefers-color-scheme:light){

    .anm-shop-catalog-tabs{
        background:rgba(255,255,255,.94);
        border-color:rgba(15,23,42,.08);
        box-shadow:0 10px 26px rgba(15,23,42,.10);
    }

    .anm-shop-catalog-tab{
        background:rgba(15,23,42,.035);
        border-color:rgba(15,23,42,.10);
        color:#17211d;
    }

    .anm-shop-catalog-tab:hover{
        background:rgba(15,23,42,.065);
    }

    .anm-shop-catalog-tab.is-active{
        background:rgba(34,197,94,.12);
        border-color:rgba(34,197,94,.38);
    }

    .anm-shop-catalog-tab__count{
        background:rgba(15,23,42,.07);
    }

    .anm-shop-refinement{
        background:rgba(15,23,42,.035);
        border-color:rgba(15,23,42,.10);
    }

    .anm-shop-refinement.is-active{
        background:rgba(34,197,94,.11);
        border-color:rgba(34,197,94,.38);
    }

    .anm-page-shortcuts .anm-shop-nav-action{
        color:var(--anm-auto-text,#17211d);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:680px){

    .anm-shop-catalog-tabs{
        gap:5px;
        padding:6px;
        border-radius:13px;
    }

    .anm-shop-catalog-tab{
        min-height:38px;
        padding:6px 8px;
        font-size:11px;
        border-radius:10px;
    }

    .anm-shop-catalog-tab__count{
        min-width:19px;
        height:19px;
        margin-left:4px;
        padding:0 5px;
        font-size:9px;
    }

    .anm-shop-refinements{
        gap:6px;
        margin:6px 0 10px;
    }

    .anm-shop-refinement{
        min-height:31px;
        padding:6px 10px;
        font-size:10px;
    }

    .anm-page-shortcuts .anm-shop-nav-action__label{
        font-size:6.8px;
    }
}


@media(max-width:390px){

    .anm-shop-catalog-tabs{
        padding:5px;
        gap:4px;
    }

    .anm-shop-catalog-tab{
        min-height:36px;
        padding:5px 6px;
        font-size:10px;
    }

    .anm-shop-refinement{
        padding:6px 9px;
        font-size:9.5px;
    }

    .anm-page-shortcuts .anm-shop-nav-action__label{
        font-size:6.2px;
    }
}

/* =========================================================
   SHOP SHORTCUTS — 80% SIZE + SAFE ANCHOR LANDING
   ========================================================= */

/*
 * Keep the shortcut navigation at 80% of its previous visual size.
 * The width remains centred so all shortcut items stay on one row.
 */
.anm-shop-three-shortcuts,
.anm-shop-four-shortcuts,
.anm-shop-five-shortcuts{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
}

/* Scale the individual shortcut controls to roughly 80% too. */
.anm-shop-three-shortcuts .anm-page-shortcut,
.anm-shop-four-shortcuts .anm-page-shortcut,
.anm-shop-five-shortcuts .anm-page-shortcut{
    min-height:30px!important;
    padding:3px 2px!important;
    font-size:80%;
}

.anm-shop-three-shortcuts .anm-page-shortcut__icon,
.anm-shop-four-shortcuts .anm-page-shortcut__icon,
.anm-shop-five-shortcuts .anm-page-shortcut__icon{
    font-size:.8em;
}

.anm-shop-three-shortcuts .anm-shop-nav-action,
.anm-shop-four-shortcuts .anm-shop-nav-action,
.anm-shop-five-shortcuts .anm-shop-nav-action{
    min-height:30px!important;
    padding:3px 2px!important;
}

/*
 * Anchor targets must land BELOW the sticky shortcut navigation.
 * Items needs extra room because Products / Services is itself sticky.
 * JS already keeps these two CSS variables synced with the real shortcut
 * position and height.
 */
#shop-overview,
#reviews-page{
    scroll-margin-top:
        calc(
            var(--anm-shop-shortcut-top, 0px)
            + var(--anm-shop-shortcut-height, 0px)
            + 12px
        );
}

#items{
    scroll-margin-top:
        calc(
            var(--anm-shop-shortcut-top, 0px)
            + var(--anm-shop-shortcut-height, 0px)
            + 12px
        );
}

#shop-products,
#shop-services{
    scroll-margin-top:
        calc(
            var(--anm-shop-shortcut-top, 0px)
            + var(--anm-shop-shortcut-height, 0px)
            + 58px
        );
}

/*
 * Give the first catalogue/review heading breathing room so it remains
 * visibly below sticky controls instead of appearing underneath them.
 */
#shop-products > h2:first-child,
#shop-services > h2:first-child,
#reviews-page > h2:first-child{
    scroll-margin-top:
        calc(
            var(--anm-shop-shortcut-top, 0px)
            + var(--anm-shop-shortcut-height, 0px)
            + 58px
        );
}

@media(max-width:680px){
    .anm-shop-three-shortcuts,
    .anm-shop-four-shortcuts,
    .anm-shop-five-shortcuts{
        width:80%;
    }

    #shop-products,
    #shop-services,
    #shop-products > h2:first-child,
    #shop-services > h2:first-child{
        scroll-margin-top:
            calc(
                var(--anm-shop-shortcut-top, 0px)
                + var(--anm-shop-shortcut-height, 0px)
                + 52px
            );
    }
}


/* =========================================================
   SHOP SOCIAL LINKS — PREMIUM SOCIAL DOCK
   ========================================================= */

.anm-shop-social-links{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;

    width:max-content;
    max-width:calc(100% - 24px);

    margin:14px auto;
    padding:8px 10px;

    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.035)
        );

    box-shadow:
        0 8px 24px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.08);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}


/* =========================================================
   INDIVIDUAL SOCIAL BUTTON
   ========================================================= */

.anm-shop-social-link{
    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    padding:0;

    border:1px solid rgba(255,255,255,.10);
    border-radius:13px;

    background:rgba(255,255,255,.07);
    color:#fff;

    font-size:18px;
    line-height:1;

    text-decoration:none;

    box-shadow:
        0 4px 12px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.06);

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


/* ICON */

.anm-shop-social-link i{
    display:block;
    line-height:1;
}


/* =========================================================
   HOVER / FOCUS
   ========================================================= */

.anm-shop-social-link:hover{
    transform:translateY(-3px) scale(1.06);

    background:rgba(255,255,255,.13);
    border-color:rgba(255,255,255,.22);

    box-shadow:
        0 9px 18px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.10);
}

.anm-shop-social-link:active{
    transform:translateY(0) scale(.96);
}

.anm-shop-social-link:focus-visible{
    outline:2px solid #22c55e;
    outline-offset:3px;
}


/* =========================================================
   BRAND COLOURS
   Uses the Font Awesome class already in your PHP.
   ========================================================= */

/* Website */
.anm-shop-social-link:has(.fa-globe){
    color:#38bdf8;
}

/* Facebook */
.anm-shop-social-link:has(.fa-facebook-f){
    color:#1877f2;
}

/* Instagram */
.anm-shop-social-link:has(.fa-instagram){
    color:#e1306c;
}

/* TikTok */
.anm-shop-social-link:has(.fa-tiktok){
    color:#ffffff;
}

/* X */
.anm-shop-social-link:has(.fa-x-twitter){
    color:#ffffff;
}

/* YouTube */
.anm-shop-social-link:has(.fa-youtube){
    color:#ff0033;
}


/* =========================================================
   SUBTLE BRAND GLOW ON HOVER
   ========================================================= */

.anm-shop-social-link:has(.fa-globe):hover{
    background:rgba(56,189,248,.13);
    border-color:rgba(56,189,248,.35);
}

.anm-shop-social-link:has(.fa-facebook-f):hover{
    background:rgba(24,119,242,.13);
    border-color:rgba(24,119,242,.35);
}

.anm-shop-social-link:has(.fa-instagram):hover{
    background:rgba(225,48,108,.13);
    border-color:rgba(225,48,108,.35);
}

.anm-shop-social-link:has(.fa-tiktok):hover{
    background:rgba(255,255,255,.11);
    border-color:rgba(255,255,255,.25);
}

.anm-shop-social-link:has(.fa-x-twitter):hover{
    background:rgba(255,255,255,.11);
    border-color:rgba(255,255,255,.25);
}

.anm-shop-social-link:has(.fa-youtube):hover{
    background:rgba(255,0,51,.12);
    border-color:rgba(255,0,51,.35);
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

@media (prefers-color-scheme:light){

    .anm-shop-social-links{
        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.96),
                rgba(248,250,252,.92)
            );

        border-color:rgba(15,23,42,.09);

        box-shadow:
            0 8px 24px rgba(15,23,42,.09),
            inset 0 1px 0 rgba(255,255,255,.9);
    }

    .anm-shop-social-link{
        background:#fff;
        border-color:rgba(15,23,42,.10);

        box-shadow:
            0 3px 10px rgba(15,23,42,.08);
    }

    .anm-shop-social-link:has(.fa-tiktok),
    .anm-shop-social-link:has(.fa-x-twitter){
        color:#111827;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:680px){

    .anm-shop-social-links{
        gap:7px;
        padding:7px 9px;
        margin:10px auto;
        border-radius:15px;
    }

    .anm-shop-social-link{
        width:36px;
        height:36px;
        border-radius:11px;
        font-size:16px;
    }
}


@media (max-width:390px){

    .anm-shop-social-links{
        gap:5px;
        padding:6px 7px;
    }

    .anm-shop-social-link{
        width:33px;
        height:33px;
        border-radius:10px;
        font-size:15px;
    }
}