/* =========================================================
   TMD SUBCATEGORY IMAGE
   AMBIENTA THEME COMPATIBILITY
   OpenCart 4
   ========================================================= */


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

#tmdsubcategory {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    box-shadow: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   NON-CAROUSEL GRID
   ========================================================= */

#tmdsubcategory.row {
    width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    align-items: stretch !important;
}


/* =========================================================
   EACH SUBCATEGORY COLUMN
   ========================================================= */

#tmdsubcategory > .subcategory-grid,
#tmdsubcategory > .subcategory,
#tmdsubcategory > .subcategory-list {

    min-width: 0 !important;

    margin: 0 !important;

    padding: 8px !important;

    float: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   CARD
   ========================================================= */

#tmdsubcategory .box {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;

    margin: 0 !important;

    padding: 10px !important;

    overflow: hidden !important;

    background: #ffffff;

    border: 1px solid #e3e3e3 !important;
    border-radius: 8px !important;

    box-sizing: border-box !important;

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


#tmdsubcategory .box:hover {
    box-shadow: 0 5px 18px rgba(0,0,0,.10);

    transform: translateY(-2px);
}


/* =========================================================
   IMAGE CONTAINER
   ========================================================= */

#tmdsubcategory .box .image {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 180px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    float: none !important;

    background: #f7f7f7;

    border-radius: 6px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   IMAGE LINK
   ========================================================= */

#tmdsubcategory .box .image > a {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}


/* =========================================================
   ACTUAL IMAGE
   ========================================================= */

#tmdsubcategory .box .image img,
#tmdsubcategory .box img.img-responsive {

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    max-height: 180px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center !important;

    position: static !important;

    float: none !important;

    transform: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   HOVER BUTTON AREA
   ========================================================= */

#tmdsubcategory .box .hoverbox {
    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    width: 100% !important;

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

    padding: 10px !important;

    margin: 0 !important;

    background: linear-gradient(
        to top,
        rgba(0,0,0,.45),
        rgba(0,0,0,0)
    );

    opacity: 0;

    transition: opacity .2s ease;

    box-sizing: border-box !important;
}


#tmdsubcategory .box .image:hover .hoverbox {
    opacity: 1;
}


/* =========================================================
   VIEW ALL BUTTON
   ========================================================= */

#tmdsubcategory .box .hoverbox a {
    display: inline-block !important;

    width: auto !important;

    height: auto !important;

    text-decoration: none !important;
}


#tmdsubcategory .box .hoverbox .btn,
#tmdsubcategory .box .btn-primary {

    position: static !important;

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

    width: auto !important;
    min-width: 0 !important;

    height: auto !important;

    margin: 0 !important;

    padding: 8px 12px !important;

    border-radius: 5px !important;

    font-size: 14px !important;
    line-height: 1.2 !important;

    float: none !important;

    white-space: nowrap !important;
}


#tmdsubcategory .box .hoverbox .btn i {
    margin-right: 5px;
}


/* =========================================================
   CAPTION
   ========================================================= */

#tmdsubcategory .box .caption {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 12px 4px 4px !important;

    position: static !important;

    float: none !important;

    text-align: center !important;

    box-sizing: border-box !important;
}


/* =========================================================
   CATEGORY TITLE
   ========================================================= */

#tmdsubcategory .box .caption h4 {

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.3 !important;

    position: static !important;
}


#tmdsubcategory .box .subcat-title {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    color: #20242a;

    font-size: 15px !important;
    font-weight: 600 !important;

    line-height: 1.35 !important;

    text-align: center !important;

    text-decoration: none !important;

    overflow-wrap: anywhere !important;
}


#tmdsubcategory .box .subcat-title:hover {
    color: #769d13 !important;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

#tmdsubcategory .box .subcat-description {

    width: 100% !important;

    margin: 8px 0 0 !important;

    font-size: 13px !important;

    line-height: 1.4 !important;

    text-align: center !important;

    position: static !important;
}


/* =========================================================
   OWL CAROUSEL FIX
   ========================================================= */

#tmdsubcategory.owl-carousel {
    width: 100% !important;

    overflow: hidden !important;
}


#tmdsubcategory.owl-carousel .owl-stage-outer {
    width: 100% !important;

    overflow: hidden !important;
}


#tmdsubcategory.owl-carousel .owl-stage {
    display: flex !important;

    align-items: stretch !important;
}


#tmdsubcategory.owl-carousel .owl-item {
    min-width: 0 !important;

    float: none !important;
}


#tmdsubcategory.owl-carousel .owl-item .subcategory {
    width: 100% !important;

    padding: 5px !important;

    box-sizing: border-box !important;
}


#tmdsubcategory.owl-carousel .owl-item .box {
    width: 100% !important;

    max-width: 100% !important;
}


/* =========================================================
   OWL NAVIGATION
   ========================================================= */

#tmdsubcategory.owl-carousel .owl-nav button.owl-prev,
#tmdsubcategory.owl-carousel .owl-nav button.owl-next {

    width: 36px !important;
    height: 36px !important;

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

    border-radius: 50% !important;

    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}


#tmdsubcategory.owl-carousel .owl-nav button i {
    font-size: 22px !important;
}


/* =========================================================
   DOTS
   ========================================================= */

#tmdsubcategory.owl-carousel .owl-dots {
    margin-top: 12px !important;

    text-align: center !important;
}


/* =========================================================
   HEADING
   ========================================================= */

.tmdheading {
    margin-top: 0 !important;
    margin-bottom: 18px !important;

    font-size: 26px !important;
    font-weight: 600 !important;
}


/* =========================================================
   LIST MODE
   ========================================================= */

#tmdsubcategory .subcategory-list {

    width: 100% !important;

    margin-bottom: 15px !important;
}


#tmdsubcategory .subcategory-list .box {

    display: grid !important;

    grid-template-columns: 180px 1fr !important;

    gap: 18px !important;
}


#tmdsubcategory .subcategory-list .image {

    width: 180px !important;
    height: 140px !important;
}


/* =========================================================
   GLOBAL SAFETY
   ========================================================= */

#tmdsubcategory *,
#tmdsubcategory *::before,
#tmdsubcategory *::after {

    box-sizing: border-box !important;
}


/* =========================================================
   LARGE TABLETS
   ========================================================= */

@media (max-width: 1199px) {

    #tmdsubcategory .box .image {
        height: 165px !important;
    }

    #tmdsubcategory .box .image img,
    #tmdsubcategory .box img.img-responsive {
        max-height: 165px !important;
    }

}


/* =========================================================
   TABLETS
   ========================================================= */

@media (max-width: 991px) {

    #tmdsubcategory .box .image {
        height: 180px !important;
    }

    #tmdsubcategory .box .image img,
    #tmdsubcategory .box img.img-responsive {
        max-height: 180px !important;
    }

    #tmdsubcategory .box .hoverbox {
        opacity: 1 !important;

        background: linear-gradient(
            to top,
            rgba(0,0,0,.38),
            rgba(0,0,0,0)
        );
    }

}


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

@media (max-width: 575px) {

    #tmdsubcategory > .subcategory-grid,
    #tmdsubcategory > .subcategory,
    #tmdsubcategory > .subcategory-list {

        padding: 6px !important;
    }


    #tmdsubcategory .box .image {

        height: 200px !important;
    }


    #tmdsubcategory .box .image img,
    #tmdsubcategory .box img.img-responsive {

        max-height: 200px !important;
    }


    #tmdsubcategory .subcategory-list .box {

        display: flex !important;

        flex-direction: column !important;
    }


    #tmdsubcategory .subcategory-list .image {

        width: 100% !important;

        height: 200px !important;
    }


    #tmdsubcategory .box .subcat-title {

        font-size: 17px !important;
    }

}
/* =========================================================
   TMD SUBCATEGORY - MOBILE LAYOUT
   Ambienta
   ========================================================= */

@media (max-width: 767px) {

  /* Grid de 2 tarjetas por fila */
  #tmdsubcategory.row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Cada tarjeta */
  #tmdsubcategory > .subcategory-grid,
  #tmdsubcategory > .subcategory,
  #tmdsubcategory > .subcategory-list {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
  }

  /* Caja */
  #tmdsubcategory .box {
    width: 100% !important;
    height: auto !important;

    padding: 6px !important;

    margin: 0 !important;

    border-radius: 7px !important;

    overflow: hidden !important;
  }

  /* Imagen cuadrada */
  #tmdsubcategory .box .image {
    width: 100% !important;

    height: auto !important;

    aspect-ratio: 1 / 1;

    overflow: hidden !important;

    border-radius: 6px !important;
  }

  #tmdsubcategory .box .image > a {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
  }

  #tmdsubcategory .box .image img,
  #tmdsubcategory .box img.img-responsive {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: center !important;
  }

  /* Quitar View All Items en mobile */
  #tmdsubcategory .hoverbox {
    display: none !important;
  }

  /* Caption */
  #tmdsubcategory .caption {
    padding: 8px 4px 4px !important;

    text-align: center !important;
  }

  /* Título */
  #tmdsubcategory .subcat-title {
    display: block !important;

    width: 100% !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    line-height: 1.3 !important;

    text-align: center !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  #tmdsubcategory .caption h4 {
    margin: 0 !important;

    line-height: 1.3 !important;
  }

  /* Heading */
  .tmdheading,
  #content > h3 {
    font-size: 20px !important;

    margin-bottom: 12px !important;
  }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

  #tmdsubcategory.row {
    gap: 8px !important;
  }

  #tmdsubcategory .box {
    padding: 5px !important;
  }

  #tmdsubcategory .subcat-title {
    font-size: 12px !important;
  }

}
/* =========================================================
   AMBIENTA MOBILE - HIDE VIEW ALL ITEMS
   ========================================================= */

@media (max-width: 767px) {

    #tmdsubcategory .hoverbox,
    #tmdsubcategory .hoverbox *,
    #tmdsubcategory .btn-primary,
    #tmdsubcategory .all {
        display: none !important;
    }

}
/* =========================================================
   AMBIENTA MOBILE - REMOVE VIEW ALL BUTTON COMPLETELY
   ========================================================= */

@media (max-width: 767px) {

    #tmdsubcategory .image .hoverbox {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #tmdsubcategory .image .hoverbox a,
    #tmdsubcategory .image .hoverbox button,
    #tmdsubcategory .image .hoverbox .btn,
    #tmdsubcategory .image .hoverbox .btn-primary {
        display: none !important;
        visibility: hidden !important;
    }

}