/* ============================================================
   AllNaijaMarket Homepage Marketplace Showcase
   Scoped to .anm-home-discovery to avoid affecting feeds,
   dashboards, sticky header, popup or other pages.
============================================================ */

.anm-home-discovery{
  width:min(1180px,calc(100% - 24px));
  margin:16px auto 30px;
  color:#e5e7eb;
}

.anm-home-shortcuts{
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,minmax(112px,1fr));
  gap:9px;
  margin-bottom:10px;
  padding:6px;
  overflow-x:auto;
  scrollbar-width:none;
  border:1px solid rgba(255,255,255,.09);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(15,23,42,.97),rgba(6,78,59,.42));
  box-shadow:0 18px 50px rgba(0,0,0,.22);
}
.anm-home-shortcuts::-webkit-scrollbar{display:none}

.anm-home-shortcut{
  min-width: 60px;
  min-height:41px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:5px 4px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:rgba(2,6,23,.55);
  color:#f8fafc;
  text-decoration:none;
  font-size:6px;
  font-weight:350;
  text-align:center;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.anm-home-shortcut:hover{
  transform:translateY(-2px);
  border-color:rgba(250,204,21,.55);
  background:rgba(6,95,70,.62);
}
.anm-home-shortcut__icon{
  display:grid;
  place-items:center;
  width:17px;
  height:17px;
  border-radius:6px;
  background:linear-gradient(145deg,#166534,#064e3b);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  font-size:10px;
}

/* =====================================================
   Shop Directory Navigation
===================================================== */

.shop-directory-shortcuts{
    grid-template-columns:repeat(3,minmax(170px,1fr));
    margin:10px auto;
    width:min(650px,calc(100% - 10px));
}

.shop-directory-shortcuts .anm-home-shortcut{
    min-height:43px;
}

.shop-directory-shortcuts .anm-home-shortcut.is-active{
    background:linear-gradient(145deg,#0b6b4f,#15966d);
    border-color:#22c55e;
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(21,150,109,.35);
}

.shop-directory-shortcuts .anm-home-shortcut.is-active
.anm-home-shortcut__icon{
    background:linear-gradient(145deg,#facc15,#eab308);
    color:#111827;
}

.shop-directory-shortcuts .anm-home-shortcut:hover{
    transform:translateY(-2px);
}

@media (max-width:700px){

    .shop-directory-shortcuts{
        grid-template-columns:repeat(3,75px);
        overflow-x:auto;
        scrollbar-width:none;
    }

    .shop-directory-shortcuts::-webkit-scrollbar{
        display:none;
    }

    .shop-directory-shortcuts .anm-home-shortcut{
        min-width:75px;
        min-height:41px;
    }

}

.anm-showcase-section{
  scroll-margin-top:100px;
  margin:0 0 22px;
  padding:18px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  background:
    radial-gradient(circle at 90% 0,rgba(34,197,94,.13),transparent 28%),
    linear-gradient(155deg,rgba(15,23,42,.98),rgba(2,6,23,.98));
  box-shadow:0 16px 44px rgba(0,0,0,.18);
}

.anm-showcase-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:15px;
}
.anm-showcase-heading__eyebrow{
  display:inline-block;
  margin-bottom:4px;
  color:#86efac;
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.anm-showcase-heading h2{
  margin:0;
  color:#f8fafc;
  font-size:clamp(22px,4vw,31px);
  line-height:1.1;
}
.anm-showcase-heading p{
  max-width:680px;
  margin:6px 0 0;
  color:#aeb9c8;
  font-size:14px;
  line-height:1.5;
}
.anm-showcase-heading__link{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:40px;
  padding:9px 13px;
  border:1px solid rgba(250,204,21,.35);
  border-radius:999px;
  background:rgba(250,204,21,.09);
  color:#fde047;
  text-decoration:none;
  font-size:13px;
  font-weight:900;
}

.anm-showcase-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
}
.anm-showcase-grid--markets{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.anm-discovery-card{
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:19px;
  background:linear-gradient(180deg,rgba(30,41,59,.96),rgba(15,23,42,.99));
  box-shadow:0 12px 28px rgba(0,0,0,.2);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.anm-discovery-card:hover{
  transform:translateY(-3px);
  border-color:rgba(74,222,128,.38);
  box-shadow:0 17px 34px rgba(0,0,0,.26);
}
.anm-discovery-card--premium{
  border-color:rgba(250,204,21,.5);
  box-shadow:0 0 0 1px rgba(250,204,21,.08),0 15px 32px rgba(0,0,0,.22);
}

.anm-discovery-card__media{
  position:relative;
  display:block;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#0f172a;
}
.anm-discovery-card--product .anm-discovery-card__media{
  aspect-ratio:1/1;
}
.anm-discovery-card__media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .35s ease;
}
.anm-discovery-card:hover .anm-discovery-card__media img{transform:scale(1.035)}
.anm-discovery-card__media::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:45%;
  background:linear-gradient(transparent,rgba(2,6,23,.86));
  pointer-events:none;
}

.anm-discovery-card__type{
  position:absolute;
  z-index:2;
  left:9px;
  bottom:9px;
  max-width:calc(100% - 18px);
  padding:5px 8px;
  border-radius:999px;
  background:rgba(6,95,70,.9);
  color:#fff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}
.anm-discovery-card__verified{
  position:absolute;
  z-index:3;
  top:9px;
  right:9px;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:2px solid #fff;
  border-radius:50%;
  background:#16a34a;
  color:#fff;
  font-size:14px;
  font-weight:1000;
  box-shadow:0 5px 15px rgba(0,0,0,.3);
}
.anm-discovery-card__premium{
  position:absolute;
  z-index:3;
  top:9px;
  left:9px;
  padding:5px 8px;
  border-radius:999px;
  background:linear-gradient(135deg,#facc15,#eab308);
  color:#10210f;
  font-size:9px;
  font-weight:1000;
  box-shadow:0 5px 16px rgba(0,0,0,.28);
}

.anm-discovery-card__body{
  display:flex;
  min-height:190px;
  flex-direction:column;
  padding:12px;
}
.anm-discovery-card__body h3{
  display:-webkit-box;
  margin:0 0 5px;
  overflow:hidden;
  color:#f8fafc;
  font-size:15px;
  line-height:1.28;
  -webkit-box-orient:vertical;
  line-clamp: 2;
  -webkit-line-clamp:2;
}
.anm-discovery-card__body h3 a{color:inherit;text-decoration:none}
.anm-discovery-card__meta,
.anm-discovery-card__location,
.anm-discovery-card__service-area,
.anm-discovery-card__distance{
  margin:0 0 5px;
  color:#b9c4d2;
  font-size:11.5px;
  line-height:1.38;
}
.anm-discovery-card__location{color:#d5b78d}
.anm-discovery-card__service-area{color:#c4b5fd}
.anm-discovery-card__distance{
  color:#fbbf24;
  font-weight:800;
}
.anm-discovery-card__price{
  margin:0 0 6px;
  color:#fde047;
  font-size:16px;
  font-weight:1000;
}
.anm-card-rating{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  margin:3px 0 9px;
  color:#cbd5e1;
  font-size:10.5px;
}
.anm-card-rating__stars{color:#facc15}
.anm-discovery-card__action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:37px;
  margin-top:auto;
  padding:8px 10px;
  border-radius:11px;
  background:linear-gradient(135deg,#facc15,#eab308);
  color:#10210f;
  text-decoration:none;
  font-size:12px;
  font-weight:1000;
  box-shadow:0 7px 18px rgba(234,179,8,.16);
}

.anm-showcase-empty{
  padding:24px 16px;
  border:1px dashed rgba(255,255,255,.15);
  border-radius:16px;
  background:rgba(255,255,255,.025);
  color:#aeb9c8;
  text-align:center;
}

@media(max-width:920px){
  .anm-showcase-grid,
  .anm-showcase-grid--markets{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:680px){
  .anm-home-discovery{
    width:min(100% - 16px,1180px);
    margin-top:10px;
  }
  .anm-home-shortcuts{
    grid-template-columns:repeat(6,104px);
    gap:8px;
    padding:9px;
    border-radius:18px;
  }
  .anm-home-shortcut{
    min-width:104px;
    min-height:72px;
    border-radius:14px;
    font-size:10px;
  }
  .anm-home-shortcut__icon{
    width:34px;
    height:34px;
    font-size:18px;
  }
  .anm-showcase-section{
    margin-bottom:13px;
    padding:12px;
    border-radius:18px;
  }
  .anm-showcase-heading{
    align-items:flex-start;
    margin-bottom:11px;
  }
  .anm-showcase-heading h2{font-size:21px}
  .anm-showcase-heading p{
    margin-top:4px;
    font-size:11.5px;
  }
  .anm-showcase-heading__link{
    min-height:34px;
    padding:7px 10px;
    font-size:10px;
  }
  .anm-showcase-grid,
  .anm-showcase-grid--markets,
  .anm-showcase-grid--products{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .anm-discovery-card{border-radius:14px}
  .anm-discovery-card__media{aspect-ratio:4/3}
  .anm-discovery-card--product .anm-discovery-card__media{aspect-ratio:1/1}
  .anm-discovery-card__body{
    min-height:162px;
    padding:9px;
  }
  .anm-discovery-card__body h3{
    margin-bottom:4px;
    font-size:12.5px;
  }
  .anm-discovery-card__meta,
  .anm-discovery-card__location,
  .anm-discovery-card__service-area,
  .anm-discovery-card__distance{
    margin-bottom:4px;
    font-size:9.5px;
  }
  .anm-discovery-card__price{font-size:14px}
  .anm-card-rating{
    margin:2px 0 7px;
    font-size:9px;
  }
  .anm-discovery-card__action{
    min-height:32px;
    border-radius:9px;
    padding:6px 7px;
    font-size:10px;
  }
  .anm-discovery-card__type{
    left:6px;
    bottom:6px;
    padding:4px 6px;
    font-size:8px;
  }
  .anm-discovery-card__premium{
    top:6px;
    left:6px;
    padding:4px 6px;
    font-size:7px;
  }
  .anm-discovery-card__verified{
    top:6px;
    right:6px;
    width:23px;
    height:23px;
    font-size:11px;
  }
}

@media(max-width:360px){
  .anm-showcase-grid,
  .anm-showcase-grid--markets,
  .anm-showcase-grid--products{
    grid-template-columns:1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  .anm-home-shortcut,
  .anm-discovery-card,
  .anm-discovery-card__media img{transition:none}
}


/* Horizontal homepage discovery rails: 10 records + final View All card */
.anm-showcase-scroll{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(230px,270px);
  gap:13px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 2px 12px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:rgba(74,222,128,.55) rgba(255,255,255,.05);
  overscroll-behavior-inline:contain;
}
.anm-showcase-scroll::-webkit-scrollbar{height:8px}
.anm-showcase-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:999px}
.anm-showcase-scroll::-webkit-scrollbar-thumb{background:rgba(74,222,128,.55);border-radius:999px}
.anm-showcase-scroll>.anm-discovery-card,
.anm-showcase-scroll>.anm-view-all-card{scroll-snap-align:start}
.anm-showcase-scroll .anm-discovery-card{height:100%}

.anm-view-all-card{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:22px 16px;
  border:1px dashed rgba(250,204,21,.55);
  border-radius:19px;
  background:
    radial-gradient(circle at 50% 10%,rgba(250,204,21,.18),transparent 42%),
    linear-gradient(155deg,rgba(6,78,59,.92),rgba(2,6,23,.98));
  color:#fff;
  text-align:center;
  text-decoration:none;
  scroll-snap-align:start;
}
.anm-view-all-card:hover{border-style:solid;transform:translateY(-2px)}
.anm-view-all-card__icon{
  display:grid;place-items:center;width:58px;height:58px;border-radius:18px;
  background:rgba(250,204,21,.14);font-size:29px
}
.anm-view-all-card strong{font-size:17px}
.anm-view-all-card span:not(.anm-view-all-card__icon){color:#cbd5e1;font-size:12px;line-height:1.45}
.anm-view-all-card b{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#facc15,#eab308);color:#10210f;font-size:20px
}

@media(max-width:680px){
  .anm-showcase-scroll{
    grid-auto-columns:minmax(158px,72vw);
    gap:8px;
    padding-bottom:9px;
  }
  .anm-view-all-card{border-radius:14px;padding:17px 12px}
  .anm-view-all-card__icon{width:48px;height:48px;border-radius:15px;font-size:24px}
  .anm-view-all-card strong{font-size:14px}
}



/* =========================================================
   SMART STICKY SHOWCASE NAVIGATION
========================================================= */

:root {
    --anm-sticky-header-bottom: 0px;
}

.anm-sticky-showcase-marker {
    display: block;
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.anm-sticky-showcase-spacer {
    width: 100%;
    margin: 0;
    padding: 0;
}

.anm-sticky-showcase-spacer[hidden] {
    display: none !important;
}

[data-sticky-showcase] {
    /*
     * Keeps the navigation above page content while allowing
     * the main sticky header to remain above it.
     */
    z-index: 950;
}

[data-sticky-showcase].is-showcase-sticky {
    position: fixed;
    top: var(--anm-sticky-header-bottom);
    left: 50%;
    width: min(1180px, calc(100% - 20px));
    margin: 0;
    transform: translateX(-50%);
    z-index: 950;

    border-color: rgba(134, 239, 172, .22);
    border-radius: 0 0 16px 16px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 23, 42, .96),
            rgba(6, 78, 59, .92)
        );

    box-shadow:
        0 12px 30px rgba(2, 6, 23, .32),
        inset 0 1px 0 rgba(255, 255, 255, .06);

    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);

    animation: anmShowcaseStickyEnter .2s ease-out;
}

@keyframes anmShowcaseStickyEnter {
    from {
        opacity: .65;
        transform: translate(-50%, -6px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/*
 * Current visible section.
 */
[data-sticky-showcase] .anm-home-shortcut.is-current-section {
    border-color: rgba(250, 204, 21, .72);
    background:
        linear-gradient(
            145deg,
            rgba(22, 163, 74, .92),
            rgba(6, 95, 70, .96)
        );
    color: #ffffff;
    box-shadow:
        0 7px 17px rgba(0, 0, 0, .22),
        inset 0 0 0 1px rgba(255, 255, 255, .08);
}

[data-sticky-showcase]
.anm-home-shortcut.is-current-section
.anm-home-shortcut__icon {
    background:
        linear-gradient(145deg, #facc15, #eab308);
    color: #17210d;
}

/*
 * Tap feedback without changing the navigation dimensions.
 */
[data-sticky-showcase] .anm-home-shortcut:active {
    transform: scale(.96);
}

/*
 * Prevent anchor targets from hiding beneath the sticky header
 * and sticky showcase navigation.
 */
.anm-showcase-section,
.anm-shop-section,
.anm-shop-feed,
.shop-products,
.shop-reviews,
.market-directory-section,
.market-directory-map-callout,
.market-live-updates {
    scroll-margin-top:
        calc(var(--anm-sticky-header-bottom) + 76px);
}

@media (max-width: 680px) {
    [data-sticky-showcase].is-showcase-sticky {
        width: calc(100% - 8px);
        border-radius: 0 0 13px 13px;
        padding: 4px;
    }

    [data-sticky-showcase].is-showcase-sticky
    .anm-home-shortcut {
        min-height: 38px;
        padding: 4px 2px;
    }

    [data-sticky-showcase].is-showcase-sticky
    .anm-home-shortcut__icon {
        width: 20px;
        height: 20px;
        border-radius: 6px;
        font-size: 11px;
    }

    [data-sticky-showcase].is-showcase-sticky
    .anm-home-shortcut > span:last-child {
        font-size: 8px;
        line-height: 1.1;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-sticky-showcase].is-showcase-sticky {
        animation: none;
    }

    [data-sticky-showcase] .anm-home-shortcut {
        scroll-behavior: auto;
    }
}

/* === SAFE AUTO LIGHT/DARK THEME OVERRIDE === */
:root{color-scheme:light dark}
@media(prefers-color-scheme:light){
 .anm-home-discovery{color:#17211d}
 .anm-home-shortcuts{background:linear-gradient(145deg,#fff,#edf7f1);border-color:#d5e1da;box-shadow:0 12px 30px rgba(15,23,42,.08)}
 .anm-home-shortcut{background:#f9fbfa;color:#17211d;border-color:#dbe5df}
 .anm-showcase-section,.anm-market-live-updates{background:linear-gradient(155deg,#fff,#f5f8f6);border-color:#d6e1db;box-shadow:0 12px 30px rgba(15,23,42,.08)}
 .anm-showcase-heading h2,.anm-discovery-card__body h3{color:#17211d}
 .anm-showcase-heading p,.anm-discovery-card__meta,.anm-card-rating{color:#66756e}
 .anm-discovery-card{background:#fff;border-color:#d7e2dc;box-shadow:0 10px 24px rgba(15,23,42,.08)}
 .anm-view-all-card{background:linear-gradient(155deg,#eaf7ef,#fff);color:#17211d}
 .anm-view-all-card span:not(.anm-view-all-card__icon){color:#66756e}
 [data-sticky-showcase].is-showcase-sticky{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(234,247,239,.94));border-color:#cfe2d7;box-shadow:0 10px 28px rgba(15,23,42,.12)}
}