/* GI Mobile Category Sidebar v1.1.7 */
/* v1.1.7: Restores Journal3 Bottom Menu horizontal swipe while keeping the raised category button and anti-flash CSS. */
.gi-mcs-wrap {
  box-sizing: border-box;
  --gi-mcs-heading-font: "Vollkorn", Georgia, "Times New Roman", serif;
}

.gi-mcs-wrap * {
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .gi-mcs-mobile-only {
    display: none !important;
  }
}

@media (max-width: 767px) {
  #content.gi-mcs-content-grid > .gi-mcs-wrap,
  .gi-mcs-content-grid > .gi-mcs-wrap {
    display: none !important;
  }

  #content.gi-mcs-content-grid.gi-mcs-content-start-mode > .gi-mcs-wrap,
  .gi-mcs-content-grid.gi-mcs-content-start-mode > .gi-mcs-wrap {
    display: block !important;
  }

  #content.gi-mcs-content-grid.gi-mcs-content-start-mode,
  .gi-mcs-content-grid.gi-mcs-content-start-mode {
    display: grid !important;
    grid-template-columns: calc(var(--gi-mcs-width, 96px) + var(--gi-mcs-sidebar-ml, 0px) + var(--gi-mcs-sidebar-mr, 0px)) minmax(0, 1fr) !important;
    column-gap: var(--gi-mcs-gap, 10px) !important;
    align-items: start !important;
    padding-left: var(--gi-mcs-content-pl, 0px) !important;
    padding-right: var(--gi-mcs-content-pr, 0px) !important;
    padding-bottom: var(--gi-mcs-bottom, 90px) !important;
    position: relative !important;
  }



  #content.gi-mcs-content-grid.gi-mcs-content-start-mode.gi-mcs-flush-left,
  .gi-mcs-content-grid.gi-mcs-content-start-mode.gi-mcs-flush-left {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    padding-left: var(--gi-mcs-content-pl, 0px) !important;
    padding-right: var(--gi-mcs-content-pr, 0px) !important;
  }

  #content.gi-mcs-content-grid > .gi-mcs-wrap,
  .gi-mcs-content-grid > .gi-mcs-wrap {
    grid-column: 1 !important;
    grid-row: auto / span 300 !important;
    min-width: 0 !important;
    width: var(--gi-mcs-width, 96px) !important;
    margin-left: var(--gi-mcs-sidebar-ml, 0px) !important;
    margin-right: var(--gi-mcs-sidebar-mr, 0px) !important;
  }

  #content.gi-mcs-content-grid > :not(.gi-mcs-wrap),
  .gi-mcs-content-grid > :not(.gi-mcs-wrap) {
    grid-column: 2 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #content.gi-mcs-content-grid > .gi-mcs-before-start,
  .gi-mcs-content-grid > .gi-mcs-before-start {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #content.gi-mcs-content-grid > .gi-mcs-after-start,
  .gi-mcs-content-grid > .gi-mcs-after-start {
    grid-column: 2 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .gi-mcs-wrap {
    width: var(--gi-mcs-width, 96px);
    max-width: var(--gi-mcs-width, 96px);
    background: var(--gi-mcs-bg, #f3f3f3);
    color: var(--gi-mcs-btn-text, #666);
    z-index: 6;
  }

  .gi-mcs-content-grid > .gi-mcs-wrap {
    position: relative;
    top: auto;
    max-height: calc(100vh - var(--gi-mcs-top, 72px) - var(--gi-mcs-bottom, 90px));
    overflow: hidden;
  }

  .gi-mcs-content-grid > .gi-mcs-wrap.gi-mcs-fixed {
    position: fixed !important;
    top: var(--gi-mcs-current-top, var(--gi-mcs-top, 72px)) !important;
    left: var(--gi-mcs-fixed-left, 0px) !important;
    width: var(--gi-mcs-width, 96px) !important;
    max-width: var(--gi-mcs-width, 96px) !important;
    height: var(--gi-mcs-current-height, calc(100vh - var(--gi-mcs-top, 72px) - var(--gi-mcs-bottom, 90px))) !important;
    max-height: var(--gi-mcs-current-height, calc(100vh - var(--gi-mcs-top, 72px) - var(--gi-mcs-bottom, 90px))) !important;
    z-index: 20 !important;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    contain: layout paint style;
  }

  .gi-mcs-content-grid > .gi-mcs-wrap.gi-mcs-docked {
    position: absolute !important;
    top: var(--gi-mcs-docked-top, 0px) !important;
    left: var(--gi-mcs-docked-left, 0px) !important;
    width: var(--gi-mcs-width, 96px) !important;
    max-width: var(--gi-mcs-width, 96px) !important;
    height: var(--gi-mcs-current-height, calc(100vh - var(--gi-mcs-top, 72px) - var(--gi-mcs-bottom, 90px))) !important;
    max-height: var(--gi-mcs-current-height, calc(100vh - var(--gi-mcs-top, 72px) - var(--gi-mcs-bottom, 90px))) !important;
    z-index: 8 !important;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    contain: layout paint style;
  }

  .gi-mcs-content-grid > .gi-mcs-wrap.gi-mcs-past-stop:not(.gi-mcs-docked) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
  }

  .gi-mcs {
    width: 100%;
    max-height: calc(100vh - var(--gi-mcs-top, 72px) - var(--gi-mcs-bottom, 90px));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: var(--gi-mcs-bg, #f3f3f3);
    border-radius: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .gi-mcs-fixed .gi-mcs,
  .gi-mcs-docked .gi-mcs {
    height: 100%;
    max-height: 100%;
  }

  .gi-mcs::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  .gi-mcs-scrollbar {
    display: none;
    position: absolute;
    top: 3px;
    right: var(--gi-mcs-scrollbar-offset, 1px);
    bottom: 3px;
    width: var(--gi-mcs-scrollbar-width, 4px);
    max-width: 6px;
    background: transparent !important;
    border-radius: 999px;
    z-index: 9;
    pointer-events: none;
    opacity: .52;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
  }

  .gi-mcs-scrollbar-thumb {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 24px;
    background: var(--gi-mcs-scrollbar-thumb, #9B9B9B);
    border-radius: 999px;
    box-shadow: none;
    opacity: .82;
    transform: translate3d(0, 0, 0);
  }

  .gi-mcs-wrap.gi-mcs-scrollbar-on.gi-mcs-has-overflow .gi-mcs-scrollbar {
    display: block;
  }

  .gi-mcs-wrap.gi-mcs-scrollbar-on.gi-mcs-has-overflow .gi-mcs {
    padding-right: 0;
  }

  .gi-mcs-title {
    font-family: var(--gi-mcs-heading-font, "Vollkorn", Georgia, "Times New Roman", serif) !important;
    padding: 12px 8px 10px;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 800;
    color: var(--gi-mcs-active, #ff6f6f);
    text-align: center;
    border-bottom: 1px solid var(--gi-mcs-border, #e4e4e4);
  }

  .gi-mcs-list,
  .gi-mcs-child-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .gi-mcs-li,
  .gi-mcs-child-li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .gi-mcs-item {
    font-family: var(--gi-mcs-heading-font, "Vollkorn", Georgia, "Times New Roman", serif) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 64px;
    padding: var(--gi-mcs-btn-py, 9px) var(--gi-mcs-btn-px, 7px);
    border-bottom: 1px solid var(--gi-mcs-border, #e4e4e4);
    color: var(--gi-mcs-btn-text, #666) !important;
    background: var(--gi-mcs-btn-bg, #f3f3f3) !important;
    text-align: center;
    text-decoration: none !important;
    font-size: var(--gi-mcs-btn-font-size, 15px);
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: 0.01em;
    word-break: keep-all;
    overflow-wrap: anywhere;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease;
  }

  .gi-mcs-item:hover,
  .gi-mcs-item:focus {
    color: var(--gi-mcs-btn-hover-text, #ff6f6f) !important;
    background: var(--gi-mcs-btn-hover-bg, #fff) !important;
  }

  .gi-mcs-item.is-active,
  .gi-mcs-li.is-active > .gi-mcs-item {
    color: var(--gi-mcs-btn-active-text, #ff6f6f) !important;
    background: var(--gi-mcs-btn-active-bg, #fff) !important;
    box-shadow: inset 4px 0 0 var(--gi-mcs-active, #ff6f6f);
  }

  .gi-mcs-li-all .gi-mcs-item {
    font-weight: 900;
    border-bottom-width: 2px;
  }

  .gi-mcs-child-list {
    border-bottom: 1px solid var(--gi-mcs-border, #e4e4e4);
    background: rgba(255,255,255,.42);
  }

  .gi-mcs-child-item {
    font-family: var(--gi-mcs-heading-font, "Vollkorn", Georgia, "Times New Roman", serif) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 42px;
    padding: 7px 6px 7px 10px;
    border-bottom: 1px dashed var(--gi-mcs-border, #e4e4e4);
    color: var(--gi-mcs-btn-text, #666) !important;
    background: transparent !important;
    text-align: center;
    text-decoration: none !important;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 700;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .gi-mcs-child-li:last-child .gi-mcs-child-item {
    border-bottom: 0;
  }

  .gi-mcs-child-item:hover,
  .gi-mcs-child-item:focus {
    color: var(--gi-mcs-btn-hover-text, #ff6f6f) !important;
    background: var(--gi-mcs-btn-hover-bg, #fff) !important;
  }

  .gi-mcs-child-item.is-active,
  .gi-mcs-child-li.is-active > .gi-mcs-child-item {
    color: var(--gi-mcs-btn-active-text, #ff6f6f) !important;
    background: var(--gi-mcs-btn-active-bg, #fff) !important;
    box-shadow: inset 3px 0 0 var(--gi-mcs-active, #ff6f6f);
  }

  /* Journal3 / OpenCart common product-list safety */
  .gi-mcs-content-grid .main-products,
  .gi-mcs-content-grid .products,
  .gi-mcs-content-grid .product-list,
  .gi-mcs-content-grid .product-grid,
  .gi-mcs-content-grid .row {
    min-width: 0 !important;
  }

  .gi-mcs-content-grid .product-layout,
  .gi-mcs-content-grid .product-thumb {
    min-width: 0 !important;
  }
}

/* v1.1.7: Journal3 Bottom Menu category primary button enhancement.
   Shape A refined: top-rounded raised tab main action button for the Product Catalog / Categories entry; bottom corners intentionally square per v1.1.7 requirement. */
@media (max-width: 767px) {
  /* v1.1.7 stability fix: keep the outer Bottom Menu visible for the raised tab,
     but restore the original horizontal swipe on the inner <ul>. v1.1.6 set the <ul>
     to overflow:visible, which can disable Journal3's scrollable Bottom Menu when
     there are more buttons than fit on screen. */
  .bottom-menu,
  .bottom-menu[class*="bottom-menu-"] {
    overflow: visible !important;
  }

  .bottom-menu > ul,
  .bottom-menu[class*="bottom-menu-"] > ul {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
    flex-wrap: nowrap !important;
    scroll-behavior: smooth;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-top: 10px !important;
    margin-top: -10px !important;
  }

  .bottom-menu > ul::-webkit-scrollbar,
  .bottom-menu[class*="bottom-menu-"] > ul::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .bottom-menu li.gi-mcs-bottom-catalog,
  .bottom-menu[class*="bottom-menu-"] li.gi-mcs-bottom-catalog {
    position: relative !important;
    overflow: visible !important;
    z-index: 60 !important;
    isolation: isolate !important;
    background: transparent !important;
  }

  /* Outer raised top-rounded tab silhouette: makes the category item visually distinct without touching Journal3 core. */
  .bottom-menu li.gi-mcs-bottom-catalog::before,
  .bottom-menu[class*="bottom-menu-"] li.gi-mcs-bottom-catalog::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: -6px !important;
    width: 94px !important;
    height: 58px !important;
    transform: translate3d(-50%, 0, 0) !important;
    -webkit-transform: translate3d(-50%, 0, 0) !important;
    border-radius: 10px 10px 0 0 !important;
    background: linear-gradient(180deg, rgba(232, 204, 145, .98) 0%, rgba(205, 169, 108, .98) 58%, rgba(180, 137, 77, .98) 100%) !important;
    box-shadow:
      0 -7px 14px rgba(0, 0, 0, .24),
      0 -1px 0 rgba(255, 255, 255, .20) inset,
      0 1px 0 rgba(0, 0, 0, .22) inset !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  /* Modern-browser early parent silhouette before JS class is attached. Kept separate so older browsers that do not support :has() still keep the class-based rule above. */
  .bottom-menu li:has(> a[href*="route=product/catalog"])::before,
  .bottom-menu[class*="bottom-menu-"] li:has(> a[href*="route=product/catalog"])::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: -6px !important;
    width: 94px !important;
    height: 58px !important;
    transform: translate3d(-50%, 0, 0) !important;
    -webkit-transform: translate3d(-50%, 0, 0) !important;
    border-radius: 10px 10px 0 0 !important;
    background: linear-gradient(180deg, rgba(232, 204, 145, .98) 0%, rgba(205, 169, 108, .98) 58%, rgba(180, 137, 77, .98) 100%) !important;
    box-shadow: 0 -7px 14px rgba(0, 0, 0, .24), 0 -1px 0 rgba(255, 255, 255, .20) inset, 0 1px 0 rgba(0, 0, 0, .22) inset !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  .bottom-menu li.gi-mcs-bottom-catalog > a,
  .bottom-menu[class*="bottom-menu-"] li.gi-mcs-bottom-catalog > a,
  .bottom-menu > ul > li > a.gi-mcs-bottom-catalog-link,
  .bottom-menu > ul > li > a[href*="route=product/catalog"],
  .bottom-menu[class*="bottom-menu-"] > ul > li > a[href*="route=product/catalog"] {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    height: 58px !important;
    min-height: 58px !important;
    margin-top: -6px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 4px 8px 3px !important;
    border-radius: 10px 10px 0 0 !important;
    border: 1px solid rgba(255, 255, 255, .44) !important;
    border-bottom: 1px solid rgba(73, 50, 28, .28) !important;
    background: linear-gradient(180deg, #e2c684 0%, #d2ae70 58%, #bd9258 100%) !important;
    color: #2b251f !important;
    box-shadow:
      0 -6px 13px rgba(0, 0, 0, .22),
      0 1px 0 rgba(0, 0, 0, .16),
      inset 0 1px 0 rgba(255, 255, 255, .42),
      inset 0 -10px 20px rgba(97, 63, 28, .10) !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    overflow: hidden !important;
    background-clip: padding-box !important;
    -webkit-mask-image: none !important;
  }

  /* Replace Journal3 icon-font pseudo icon with provided PNG. */
  .bottom-menu li.gi-mcs-bottom-catalog > a::before,
  .bottom-menu[class*="bottom-menu-"] li.gi-mcs-bottom-catalog > a::before,
  .bottom-menu > ul > li > a.gi-mcs-bottom-catalog-link::before,
  .bottom-menu > ul > li > a[href*="route=product/catalog"]::before {
    content: "" !important;
    display: block !important;
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    flex: 0 0 31px !important;
    margin: 0 auto 1px !important;
    background: url('../image/gi_mobile_category_sidebar/LOGO_CATA_WHITE.png') center center / contain no-repeat !important;
    font-size: 0 !important;
    line-height: 0 !important;
    font-family: inherit !important;
    color: transparent !important;
    opacity: 1 !important;
    text-indent: -9999px !important;
    speak: none !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .28)) !important;
  }

  .bottom-menu li.gi-mcs-bottom-catalog > a .links-text,
  .bottom-menu[class*="bottom-menu-"] li.gi-mcs-bottom-catalog > a .links-text,
  .bottom-menu > ul > li > a.gi-mcs-bottom-catalog-link .links-text,
  .bottom-menu > ul > li > a[href*="route=product/catalog"] .links-text,
  .bottom-menu[class*="bottom-menu-"] > ul > li > a[href*="route=product/catalog"] .links-text {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #2b251f !important;
    font-family: "Vollkorn", Georgia, "Times New Roman", serif !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .22) !important;
  }

  .bottom-menu li.gi-mcs-bottom-catalog > a:hover,
  .bottom-menu li.gi-mcs-bottom-catalog > a:focus,
  .bottom-menu li.gi-mcs-bottom-catalog > a:active,
  .bottom-menu li.gi-mcs-bottom-catalog.active > a,
  .bottom-menu[class*="bottom-menu-"] li.gi-mcs-bottom-catalog > a:hover,
  .bottom-menu[class*="bottom-menu-"] li.gi-mcs-bottom-catalog > a:focus,
  .bottom-menu[class*="bottom-menu-"] li.gi-mcs-bottom-catalog > a:active,
  .bottom-menu[class*="bottom-menu-"] li.gi-mcs-bottom-catalog.active > a,
  .bottom-menu > ul > li > a[href*="route=product/catalog"]:hover,
  .bottom-menu > ul > li > a[href*="route=product/catalog"]:focus,
  .bottom-menu > ul > li > a[href*="route=product/catalog"]:active {
    background: linear-gradient(180deg, #ead397 0%, #d8b879 58%, #bf9358 100%) !important;
    color: #2b251f !important;
    box-shadow:
      0 -7px 15px rgba(0, 0, 0, .27),
      0 1px 0 rgba(0, 0, 0, .17),
      inset 0 1px 0 rgba(255, 255, 255, .52),
      inset 0 -10px 20px rgba(97, 63, 28, .08) !important;
  }

  /* Subtle top highlight lip; keeps the upper curve smooth without rounding the bottom edge. */
  .bottom-menu li.gi-mcs-bottom-catalog > a::after,
  .bottom-menu[class*="bottom-menu-"] li.gi-mcs-bottom-catalog > a::after,
  .bottom-menu > ul > li > a[href*="route=product/catalog"]::after,
  .bottom-menu[class*="bottom-menu-"] > ul > li > a[href*="route=product/catalog"]::after {
    content: "" !important;
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    top: 6px !important;
    height: 1px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .55) !important;
    pointer-events: none !important;
  }

  .bottom-menu li.gi-mcs-bottom-catalog > a i,
  .bottom-menu li.gi-mcs-bottom-catalog > a svg,
  .bottom-menu[class*="bottom-menu-"] li.gi-mcs-bottom-catalog > a i,
  .bottom-menu[class*="bottom-menu-"] li.gi-mcs-bottom-catalog > a svg,
  .bottom-menu > ul > li > a[href*="route=product/catalog"] i,
  .bottom-menu > ul > li > a[href*="route=product/catalog"] svg {
    display: none !important;
  }
}