#guide{
  margin-top:0 !important;
  padding:0 !important;
}

#guide .global-content{
  margin:0 !important;
  padding:0 16px !important;
  background:#fff;
}

.page.guide-page{
  width:100%;
  max-width:768px;
  margin:0 auto;
  padding-top:0;
}

.page.guide-page .guide-sticky{
  position:sticky;
  top:0;
  z-index:1000;
  background:#fff;
  width:100%;
}


/* =========================================================
   HEADER
========================================================= */

.page.guide-page .guide-title-logo{
    width:25px;
    height:25px;
    object-fit:contain;
    flex:0 0 auto;
    border-radius:5px;
}

.page.guide-page .guide-title{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 16px 0 16px;
}

.page.guide-page h2{
    margin:0;
    color:#111;
    font-size:var(--title);
    font-weight:700;
    padding:0;
}

/* =========================================================
   STICKY BAR
========================================================= */

#guide .guide-sticky-bar{
    position:sticky;
    top:0;
    z-index:50;
    width:100%;
    padding:12px 0 10px;
    background:#fff;
}


/* ================ MAIN TABS ====================== */

#guide .guide-main-tabs{
    display:flex;
    align-items:stretch;
    width:100%;
    overflow-x:auto;
    scrollbar-width:none;
    gap:8px;
    padding:0 16px;
    border-top:1px solid #e5e5e5;
    border-bottom:1px solid #e5e5e5;
}

#guide .guide-main-tabs::-webkit-scrollbar{
    display:none;
}

#guide .guide-main-tab{
    position:relative;
    flex:0 0 auto;
    border:0;
    background:transparent;
    padding:14px;
    border-radius:0;
    font-family:inherit;
    font-size:11px;
    font-weight:700;
    color:#777;
    cursor:pointer;
    white-space:nowrap;
}


#guide .guide-main-tab.active{
    background:transparent;
    color:#111;
}


/* ACTIVE INDICATOR */

#guide .guide-main-tab.active::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:5px;
    background:#111;
    border-radius:2px 2px 0 0;
    z-index:2;
}


/* =========================================================
   PILLS WRAPPER
========================================================= */

#guide .guide-pills-wrap{
    position:relative;
    width:100%;
}


/* =========================================================
   PILLS WRAPPER
========================================================= */

#guide .guide-pills-wrap{
    position:relative;
    width:100%;
}


/* =========================================================
   GUIDE PILLS
========================================================= */

#guide .guide-pills{
    display:flex;
    align-items:center;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    gap:8px;
    padding:10px 58px 2px 16px;
    box-sizing:border-box;

    transition:
        max-height .25s ease,
        padding .25s ease;
}

#guide .guide-pills::-webkit-scrollbar{
    display:none;
}


/* =========================================================
   OPEN STATE
========================================================= */

#guide .guide-pills-wrap.open .guide-pills{
    flex-wrap:wrap;
    overflow-x:hidden;
    overflow-y:visible;
    padding-right:16px;
    max-height:500px;
}


/* =========================================================
   GUIDE PILL
========================================================= */

#guide .guide-pill{
    flex:0 0 auto;
    border:1px solid rgba(0,0,0,.10);
    background:#fff;
    padding:7px 13px;
    border-radius:999px;
    font-family:inherit;
    font-size:11px;
    font-weight:500;
    color:#111;
    cursor:pointer;
    white-space:nowrap;
    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}


#guide .guide-pill.active{
    background:#74b3de;
    border-color:#74b3de;
    color:#fff;
}


/* =========================================================
   DROPDOWN BUTTON
========================================================= */

#guide .guide-pills-dropdown{
    position:absolute;
    right:16px;
    top:50%;
    width:30px;
    height:30px;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid rgba(0,0,0,.06);
    border-radius:50%;
    background:#fff;
    box-shadow:0 4px 16px rgba(0,0,0,.08);
    cursor:pointer;
    z-index:10;
}


#guide .guide-pills-dropdown span{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:19px;
    line-height:1;
    color:#111;
    transform:translateY(-2px);
    transition:transform .2s ease;
}


/* =========================================================
   ARROW — OPEN
========================================================= */

#guide .guide-pills-wrap.open
.guide-pills-dropdown span{

    transform:
        translateY(2px)
        rotate(180deg);
}

/* =========================================================
   GUIDE FEED
========================================================= */

#guide .guide-feed{
    width:100%;
    padding:0 0 20px 0;
}


/* =========================================================
   GUIDE SECTION
========================================================= */

#guide .guide-section{
    width:100%;
}

#guide .guide-section-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:0 0 16px 0;
}


#guide .guide-section-title h2{
    margin:0;
    font-size:12px;
    line-height:1.2;
    font-weight:600;
    color:#111;
}

#guide .guide-share{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    background:transparent;
    color:#111;
    cursor:pointer;
}

#guide .guide-share svg{
    width:18px;
    height:18px;
    fill:currentColor;
}


/* =========================================================
   IMAGE CAROUSEL — IG STYLE
========================================================= */

#guide .guide-image-carousel{
    position:relative;
    width:100%;
    overflow:hidden;
}


/* =========================================================
   IMAGE TRACK
========================================================= */

#guide .guide-image-track{
    display:flex;
    align-items:flex-start;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

#guide .guide-image-track::-webkit-scrollbar{
    display:none;
}


/* =========================================================
   GUIDE IMAGE
========================================================= */

#guide .guide-image{
    flex:0 0 100%;
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    user-select:none;
    -webkit-user-drag:none;
}


/* =========================================================
   COUNTER
========================================================= */

#guide .guide-image-counter{
    position:absolute;
    top:12px;
    right:12px;
    z-index:5;
    padding:5px 9px;

    border-radius:999px;

    background:rgba(0,0,0,.55);

    color:#fff;

    font-size:11px;
    font-weight:600;

    line-height:1;
}


/* =========================================================
   FALLBACK
========================================================= */

#guide .guide-image-fallback{
    flex:0 0 100%;

    min-height:220px;

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

    flex-direction:column;

    text-align:center;

    padding:30px;

    background:#f4f4f4;

    color:#888;

    font-size:13px;

    scroll-snap-align:start;
}


#guide .guide-image-fallback strong{
    color:#333;
}


/* =========================================================
   EMPTY GUIDE
========================================================= */

#guide .guide-empty{
    margin:0 16px;

    padding:40px 20px;

    border-radius:18px;

    background:#f5f5f5;

    text-align:center;

    color:#888;

    font-size:13px;
}


#guide .guide-empty strong{
    color:#333;
}