<?php

?>
<style>
  /*stilo de scroll*/

  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: #F5F5F5;
  }

  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #<?php echo $conf_color; ?>;
    background-image: -webkit-linear-gradient(90deg, #<?php echo $conf_color;?> 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)
  }

  .whatsapp,
  .whatsapp_2 {
    position: fixed;
    width: 45px;
    height: 45px;
    right: 10px;
    /* Ahora es completamente visible */
    background-color: #25d366;
    color: #E2E2E1;
    border-radius: 50%;
    text-align: center;
    font-size: 22px;
    z-index: 100;
    transition: right 0.3s ease-in-out;
  }

  .whatsapp_2 {
    background-color: #<?php echo $conf_color; ?>;
  }

  .whatsapp:hover,
  .whatsapp_2:hover {
    color: black;
  }

  /* Ajuste de posiciones */
  .whatsapp {
    bottom: 25px;
  }

  .whatsapp_2 {
    bottom: 90px;
  }

  /* Eliminamos el movimiento al pasar el cursor */
  .whatsapp:hover,
  .whatsapp_2:hover {
    right: 10px;
    /* Ahora no se moverá */
  }

  /* En dispositivos móviles sigue visible */
  @media screen and (max-width: 768px) {

    .whatsapp,
    .whatsapp_2 {
      right: 10px;
    }
  }

  .whatsapp-icon,
  .fa-shopping-cart {
    margin-top: 13px;
  }

  /*carrusel marcas*/

  .carrusel {
    height: 35vh;
    display: flex;
    align-items: center;
  }

  .carrusel-items {
    display: flex;
    overflow-x: hidden;
    overflow-y: hidden;

  }

  .carrusel-item {
    min-width: 200px;
    max-width: 200px;
    height: 100px;
    outline: 0px solid rgb(254, 255, 254);
    cursor: pointer;
  }

  .carrusel-item img {
    width: 100%;
    height: 70%;
    object-fit: cover;
    padding-right: 50px;
  }

  .carrusel-item:hover {
    transform: scale(1.2);
  }



  /*focus buscador*/
  input[type=search]:focus {
    border-radius: 20px;
    box-shadow: 0 0 5px #<?php echo $conf_color; ?>;
    ;
  }


  /*carrusel principal*/
  #carrusel-caja {
    -moz-animation: automatizacion 10s infinite linear;
    -o-animation: automatizacion 10s infinite linear;
    -webkit-animation: automatizacion 10s infinite linear;
    animation: automatizacion 10s infinite linear;
    -webkit-transition: all 0.90s ease;
    -moz-transition: all 0.90s ease;
    -ms-transition: all 0.90s ease;
    -o-transition: all 0.90s ease;
    transition: all 0.90s ease;
    height: 310px;
    width: 300%;
  }

  #carrusel-contenido {
    margin: 0 auto;
    overflow: hidden;
    text-align: left;
  }

  .imagenes {
    height: 310px;
    width: 100%;
  }

  .carrusel-elemento {
    float: left;
    width: 33.333%;
  }

  @-moz-keyframes automatizacion {
    0% {
      margin-left: 0;
    }

    30% {
      margin-left: 0;
    }

    35% {
      margin-left: -100%;
    }

    65% {
      margin-left: -100%;
    }

    70% {
      margin-left: -200%;
    }

    95% {
      margin-left: -200%;
    }

    100% {
      margin-left: 0;
    }
  }

  @-webkit-keyframes automatizacion {
    0% {
      margin-left: 0;
    }

    30% {
      margin-left: 0;
    }

    35% {
      margin-left: -100%;
    }

    65% {
      margin-left: -100%;
    }

    70% {
      margin-left: -200%;
    }

    95% {
      margin-left: -200%;
    }

    100% {
      margin-left: 0;
    }
  }

  @keyframes automatizacion {
    0% {
      margin-left: 0;
    }

    30% {
      margin-left: 0;
    }

    35% {
      margin-left: -100%;
    }

    65% {
      margin-left: -100%;
    }

    70% {
      margin-left: -200%;
    }

    95% {
      margin-left: -200%;
    }

    100% {
      margin-left: 0;
    }
  }

  /*input password*/
  .form_group {
    position: sticky;
  }

  .form_group span {
    position: absolute;
    right: 10px;
    padding-top: 15px;
    font-size: 15px;
  }


  /*wishlist*/
  .action_links ul li.wishlist a:hover {
    hover: none;
  }


  /*checkbox en marcas*/
  .checkbox {
    cursor: pointer;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    width: 13px;
    height: 13px;
    appearance: none;
    border: 2px solid #<?php echo $conf_color; ?>;
    background-position: 0 -2rem;
    background-size: 100%;
    background-repeat: no-repeat;
    transition: all 0.3s ease-in-out;
    border-radius: 3px;
  }

  .checkbox:checked {
    background-color: #<?php echo $conf_color; ?>;
    background-position: 0 0;

  }


  /*numerito de deseos*/
  #notification_count1 {
    top: -2em;
    right: 0.5em;
    s width: 1.5em;
    padding: 1px 8px 1px 8px;
    background: #<?php echo $conf_color; ?>;
    color: #ffffff;
    font-weight: bold;
    margin-left: 77px;
    border-radius: 20px;
    position: absolute;
    margin-top: 11px;
    font-size: 11px;
  }


  /*numerito de carrito*/
  #notification_count2 {
    top: -2em;
    right: 0.5em;
    s width: 1.5em;
    padding: 1px 8px 1px 8px;
    background: #<?php echo $conf_color; ?>;
    color: #ffffff;
    font-weight: bold;
    margin-left: 77px;
    border-radius: 20px;
    position: absolute;
    margin-top: 11px;
    font-size: 11px;
  }

  /*lista de buscador*/
  .flex {
    display: flex;
    align-items: center;
    padding-left: 10px;
  }

  .lista__item--inner:hover>.lista--enlace {
    background-color: #E2E2E1;
    color: #<?php echo $conf_color; ?>;
    padding-left: 10px;
  }

  .lista--enlace {
    color: #000;
    min-height: 40px;
  }

  select.form-control-sm {
    border-color: #E4E2E7;
  }


  /*atributos*/
  .newsletter_inner1 input[type="radio"] {
    visibility: hidden;
    display: inline-block;
  }

  .newsletter_inner1 *,
  .newsletter_inner1 ::after,
  .newsletter_inner1 ::before {
    box-sizing: border-box;
    display: inline-block;
  }

  .newsletter_inner1 .container {
    position: relative;
    cursor: pointer;
    font-size: 15px;
    user-select: ;

  }

  /* Create a custom checkbox */
  .newsletter_inner1 .checkmark {
    position: relative;
    height: 1.6em;
    width: 1.6em;
    border-radius: 5px;
    transition: all 0.7s;
    display: inline-block;
  }


  /* Create the checkmark/indicator (hidden when not checked) */
  .newsletter_inner1 .checkmark::after {
    content: "";
    position: relative;
    display: none;
  }

  /* Show the checkmark when checked */
  .newsletter_inner1 .container input:checked~.checkmark::after {
    display: block;
  }

  /* Style the checkmark/indicator */
  .newsletter_inner1 .container .checkmark::after {
    left: 0.5em;
    top: 0.30em;
    width: 0.50em;
    height: 0.85em;
    border: solid #000;
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
  }

  /*div que muestra los resultador del color en tabla carrito*/
  .cat {
    border-radius: 5px;
    width: 15px;
    height: 15px;
  }
</style>