/**
 * Styles for mcashop.mx
 *
 * Description: Defines visual styles for mcashop.mx, including layout, typography,
 * and color schemes.
 *
 * Property of: mcashop.mx
 * Developed by: @gabinosarmiento
 * Last Updated: August 27, 2025
 */

@import url(../fonts/roboto/roboto.css);
@import url(../fonts/nunito/nunito.css);
.no-scroll, body, html {
   height: 100%
}
.card-footer, .img-height {
   text-align: center;
   overflow: hidden
}
.list-social li a, a, a:focus, a:hover {
   text-decoration: none
}
.content-mca, .sidebar-mca, .wave-effect {
   box-sizing: border-box
}
:root {
   --mca-main-color: #066AC4;
   --mca-hover-color: #054F9D;
   --mca-inactive-color: #1676bf
}
body {
   font-size: 16px;
   font-weight: 400;
   font-family: Roboto, sans-serif;
   background-color: #fff
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
   font-family: Nunito, sans-serif;
   line-height: 1.3;
   color: inherit
}
a {
   color: var(--mca-main-color)
}
a:hover {
   color: var(--mca-hover-color)
}
.list-footer a, .list-social li a {
   color: rgba(255, 255, 255, .75)
}
a:focus, button:focus, input:focus, select:focus, textarea:focus {
   outline: 0;
   box-shadow: none
}
.content {
   width: 100%;
   position: relative
}
.badge-cart, .card-footer, .teamwork {
   position: absolute
}
.no-scroll {
   overflow: hidden
}
.badge-cart {
   font-size: 10px;
   line-height: 15px;
   width: 20px;
   height: 20px;
   left: 0;
   top: -12px;
   border-radius: 50%;
   content: "0"
}
.badge-stock {
   color: #fff;
   background-color: #dc3545
}
.img-cover {
   width: 100%;
   height: 100%;
   max-width: 100%;
   display: block;
   object-fit: cover;
}
.img-height {
   width: 100%;
   min-height: 240px;
   max-height: 400px
}
.teamwork {
   color: #fff;
   bottom: 0;
   padding: 40px;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
   width: 100%
}
.navbar-mca {
   background-color: var(--mca-hover-color)
}
.navbar-mca .navbar-toggler {
   font-size: 1rem;
   padding: .375rem .5rem;
   color: #d9d9d9;
   border-color: #d9d9d9
}
.navbar-mca .navbar-toggler:hover {
   color: #212529;
   background-color: #f8f9fa;
   border-color: #f8f9fa
}
.nav-mca .nav-item {
   margin-left: 1rem;
   position: relative;
   display: flex;
   align-items: center;
}
.nav-mca .nav-link {
   padding: 0;
   color: #d9d9d9
}
.list-footer a:hover, .nav-mca .nav-link:hover {
   color: #fff
}
.custom-search {
   width: 400px;
   margin-left: auto
}
.navbar-bottom {
   padding-top: .5rem;
   padding-bottom: .5rem;
   box-shadow: 0 2px 10px #00000033
}
.wrapper {
   padding: 50px 0
}
.wrapper-middle {
   padding: 25px 0
}
.wrapper-bottom {
   padding-bottom: 50px
}
.info-wrap {
   padding-bottom: 20px
}
.card-footer {
   font-size: .75rem;
   padding: 6px 8px;
   border: none;
   bottom: 0;
   width: 100%;
   white-space: nowrap;
   text-overflow: ellipsis;
   background-color: #e9ecef;
   cursor: default
}
.product-text {
   display: block
}
.product-prize {
   font-weight: 600
}
.product-brand {
   padding: 2px;
   width: 60px;
   height: 60px;
   position: absolute;
   border-radius: 6px;
   z-index: 2
}
.card-product-brand, .product-brand {
   top: 10px;
   left: 10px;
   background-color: #f8f8f8
}
.card-deck {
   display: flex;
   flex-wrap: wrap;
   margin-right: -1%
}
.card-product-image, .card-product-thumbnail {
   display: block;
   overflow: hidden;
   text-align: center
}
.card-deck .card-categories {
   flex: 1 0 24%;
   max-width: 24%;
   margin-right: 1%;
   overflow: hidden
}
.card-deck .card-products {
   flex: 1 0 49%;
   max-width: 49%;
   margin-right: 1%
}
.card-product-brand {
   width: 50px;
   position: absolute;
   border-radius: 6px;
   z-index: 1
}
.card-product-cover {
   padding: 20px
}
.card-product-image {
   padding: 16px
}
.card-product-thumbnail {
   padding: 10px;
   height: 206px
}
.list-item-thumbnail {
   width: 65px;
   height: 65px;
   padding: 0;
   margin: auto;
   text-align: center;
   overflow: hidden;
   display: inline-block;
   border-radius: .625rem;
   border: 1px solid #ebebeb
}
.card-product-wrap {
   overflow: hidden;
   padding: 10px
}
.card-product-hover:hover {
   box-shadow: 0 4px 15px rgba(153, 153, 153, .3);
   transition: .2s
}
.card-product-text {
   color: #5a5a5a;
   display: block
}
.card-product-taxonomy {
   font-size: 14px;
   padding-left: 0;
   list-style: none;
   margin: 0
}
.card-product-rated, .card-product-sku {
   color: #054f9d;
   font-size: 12px
}
.rating-stars {
   display: inline-block;
   vertical-align: middle;
   list-style: none;
   margin: 0;
   padding: 0;
   position: relative;
   white-space: nowrap;
   clear: both
}
.rating-stars li.stars-active {
   position: absolute;
   top: 0;
   left: 0;
   overflow: hidden;
   z-index: 2
}
.rating-stars li {
   display: block;
   text-overflow: clip;
   white-space: nowrap;
   z-index: 1
}
.accordion>.card:not(:last-of-type) {
   border-bottom: 0;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0
}
.quantity {
   height: 38px;
   width: 120px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: .625rem;
   background: #fff;
   border: 1px solid #ced4da
}
.quantity span {
   width: 100%;
   text-align: center;
   cursor: pointer;
   user-select: none
}
.quantity .number {
   border-right: 1px solid #ced4da;
   border-left: 1px solid #ced4da;
   pointer-events: none
}
.shipping-brand {
   width: 80px
}
.cart-message {
   margin-bottom: 1rem;
}
.cart-message-warning, .footer {
   font-size: .875rem
}
.footer h5 {
   margin-bottom: .25rem
}
.list-footer, .list-payment, .list-social {
   margin-bottom: 2rem
}
.list-social li a {
   text-align: center;
   display: inline-flex;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border: 1px solid #fff;
   background-color: transparent;
   align-items: center;
   justify-content: center
}
.list-social li a:hover {
   color: #343a40;
   background-color: #fff
}
.list-footer li {
   line-height: 1.5rem
}
.list-payment i {
   width: 2rem
}
.list-payment .fa-cc-mercado {
   height: 1.75rem;
   vertical-align: text-bottom
}
.hr-footer {
   border-top: 1px solid rgba(255, 255, 255, .2)
}
.multiline-truncate {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis
}
.brands-container, .categories-container {
   width: 100%;
   margin-bottom: 60px;
   position: relative
}
.brands-letter {
   margin: 0;
   line-height: 1;
   text-align: center;
   padding: 30px 0;
}
.brand-logo, .category-logo {
   width: 90px;
   height: 90px;
   flex: 0 0 auto;
   overflow: hidden;
   border-radius: 10px
}
.section-subtitle, .text-wrapper {
   margin-bottom: 1rem
}
.brands-row, .categories-row {
   gap: 10px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between
}
.brands-row::after, .categories-row::after {
   content: "";
   flex: 1 1 auto
}
.banner-content {
   position: relative;
}
.banner-text {
   padding: 20px;
   color: #fff;
   position: absolute;
   top: 50%;
   z-index: 99;
   transform: translateY(-50%)
}
.banner-title {
   font-family: Nunito, sans-serif;
   font-size: 1.125rem;
}
.banner-subtitle {
   display: block;
   font-weight: 300
}
.alphabet-nav {
   top: 0;
   display: flex;
   position: sticky;
   padding-top: 20px;
   padding-bottom: 10px;
   justify-content: space-between;
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
   z-index: 10
}
.alphabet-letter {
   width: 28px;
   height: 28px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   border-radius: .625rem;
   background-color: #fff;
   color: var(--mca-main-color);
   border: 1px solid var(--mca-main-color)
}
.alphabet-active, .alphabet-letter:hover {
   color: #fff;
   border-color: var(--mca-hover-color);
   background-color: var(--mca-hover-color)
}
.sidebar-link, .sidebar-sublink a {
   color: #343a40
}
.item-scale, .item-up {
   transition: transform .2s
}
.item-scale:hover {
   transform: scale(1.2)
}
.item-up:hover {
   transform: translateY(-8px)
}
.item-gayscale {
   filter: grayscale(100%);
   transition: filter .2s
}
.item-gayscale:hover {
   filter: grayscale(0%)
}
.text-wrapper {
   width: 100%;
   padding: 8px 10px;
   border: 1px dashed #d2d6de;
   border-radius: .625rem
}
.text-loading {
   background: linear-gradient(90deg, white 0%, #5a5a5a 50%, white 100%);
   background-size: 200%;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: text-reveal 2s infinite linear;
}
.carousel-item {
   min-height: 400px;
   background-color: #f8f8f8;
}
@keyframes text-reveal {
   0% {
      background-position: 200% 0;
   }
   100% {
      background-position: -200% 0;
   }
}
.layout-mca {
   display: grid;
   position: relative;
   grid-template-columns: 25% 75%
}
.content-mca {
   padding-left: 30px
}
#content {
   width: 100%;
   min-width: 100%;
   min-height: 100vh;
   transition: .3s
}
.sidebar-nav {
   padding-left: 0;
   list-style: none;
   position: relative;
   border-radius: 0.625rem;
   border: 1px solid #ebebeb;
   background-color: #ffffff;
   background-clip: border-box;
}
.sidebar-link {
   display: block;
   padding: 8px 16px;
   cursor: pointer;
   position: relative
}
.sidebar-sublink {
   font-size: 14px;
   padding: 6px 16px
}
.sidebar-link:hover {
   color: #343a40;
   background-color: #f8f8f8
}
.sidebar-caret[aria-expanded=true]::after, .sidebar-close:hover {
   transform: rotate(90deg)
}
.sidebar-caret::after {
   content: "";
   width: 16px;
   height: 16px;
   right: 16px;
   top: calc(50% - 8px);
   position: absolute;
   background-image: url('assets/caret.svg');
   background-size: 16px 16px;
   background-repeat: no-repeat;
   transition: transform .3s
}
.navbar-bottom .dropdown-menu li:not(:last-child), .sidebar-item:not(:last-child) {
   border-bottom: 1px solid #ebebeb
}
.section-title:has(+.section-subtitle) {
   margin-bottom: 0
}
@media (min-width:576px) {
   .banner-title {
      font-size: 1.125rem
   }
   .card-columns {
      -webkit-column-count: 3;
      -moz-column-count: 3;
      column-count: 3;
      -webkit-column-gap: 1.25rem;
      -moz-column-gap: 1.25rem;
      column-gap: 1.25rem;
      orphans: 1;
      widows: 1
   }
   .card-columns .card {
      display: inline-block;
      width: 100%
   }
   .card-deck .card-products {
      flex: 1 0 32.33%;
      max-width: 32.33%;
      margin-right: 1%
   }
}
@media (min-width:768px) {
   .banner-title {
      font-size: 1.5rem
   }
   .card-deck .card-categories {
      flex: 1 0 15.66%;
      max-width: 15.66%;
      margin-right: 1%
   }
}
@media (min-width:992px) {
   .banner-title {
      font-size: 2rem;
   }
   .dropdown-menu .dropdown-toggle:after {
      border-top: .3em solid transparent;
      border-right: 0;
      border-bottom: .3em solid transparent;
      border-left: .3em solid
   }
   .dropdown-menu .dropdown-menu {
      margin-left: 0;
      margin-right: 0
   }
   .dropdown-menu li {
      position: relative
   }
   .nav-item .submenu {
      display: none;
      position: absolute;
      left: calc(100% - 8px);
      top: 8px
   }
   .nav-item .submenu-left {
      right: 100%;
      left: auto
   }
   .dropdown-menu>li:hover {
      background-color: #f1f1f1
   }
   .dropdown-menu>li:hover>.submenu {
      display: block
   }
   .card-deck .card-categories {
      flex: 1 0 11.5%;
      max-width: 11.5%;
      margin-right: 1%
   }
   .card-deck .card-products {
      flex: 1 0 19%;
      max-width: 19%;
      margin-right: 1%
   }
}
@media (max-width:575.98px) {
   .banner-subtitle {
      font-size: 14px
   }
}
@media (max-width:767.98px) {
   .sidebar-content {
      width: 100%;
      border-radius: 0
   }
   .section-title {
      font-size: 1.25rem
   }
   .card-product-rated, .section-message {
      display: none
   }
}
@media (max-width:991.98px) {
   .navbar-bottom, .sidebar-mca {
      display: none
   }
   .wrapper-bottom {
      padding-bottom: 20px
   }
   .wrapper {
      padding: 20px 0
   }
   .card-text {
      font-size: .875rem
   }
   .card-product-title {
      font-size: .875rem;
      line-height: 1rem
   }
   .card-product-thumbnail {
      padding: 6px;
      height: 160px
   }
   .card-deck .card-footer {
      font-size: .625rem
   }
   .content-mca {
      padding-left: 0
   }
   .layout-mca {
      grid-template-columns: 100%
   }
   .logo {
      width: 120px
   }
   .container-wrap {
      padding: 30px 0
   }
   .custom-search {
      width: 100%;
      margin-top: 15px;
      margin-right: 0
   }
   .teamwork {
      padding: 10px;
      font-size: 14px
   }
}
.navbar-bottom .dropdown-menu .dropdown-toggle:not(.nav-link)::after {
   display: inline-block;
   width: 0;
   height: 0;
   margin-left: .5em;
   vertical-align: 0;
   border-bottom: .3em solid transparent;
   border-top: .3em solid transparent;
   border-left: .3em solid
}
.btn-chat {
   position: fixed;
   bottom: 50px;
   right: 50px;
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center
}
.btn-chat button {
   width: 50px;
   height: 50px;
   background-color: #066ac4;
   border: none;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   color: #fff;
   z-index: 1
}
.wave-effect {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 0;
   height: 0;
   border: 2px solid #066ac4;
   border-radius: 50%;
   transform: translate(-50%, -50%);
   animation: 2s linear infinite waveEffect;
   pointer-events: none;
   z-index: -1
}
@keyframes waveEffect {
   0% {
      width: 0;
      height: 0;
      opacity: 1
   }
   50% {
      width: 60px;
      height: 60px;
      opacity: .3
   }
   100% {
      width: 80px;
      height: 80px;
      opacity: 0
   }
}
.btn-chat button:hover {
   background-color: #054f9d
}
.img-footer {
   font-size: .625rem;
   text-align: center;
   padding: 6px 8px;
   width: 100%;
   bottom: 0;
   left: 0;
   z-index: 999;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
   text-overflow: ellipsis;
   background-color: #e9ecef;
}