/*
 * file_name = supplier__landing_page__stylesheet.css
 *
 * file_type = CSS stylesheet
 *
 * description = this file contains the  CSS styles used on the top page for each
 *               suppler. These type of pages list the major categories under which products are
 *               organized. E.g. for Balt it would list categories such as 'Aneurisms', 'Stroke', 'MAV', etc.
 *
 * descripción = este archivo contiene los estilo CSS usados para la página principal dedicada
 *               a cada marca/representación.  Este tipo de página enumera las principales categorias
 *               bajo las cuales se organizan los productos del proveedor. Por ejemplo, para Balt
 *               mostraría categorias como 'Aneurismas', 'Stroke', 'MAV', etc.
 *
 */

/***********************************************************************
*                                                                      *
*                      SUPPLIER MAIN LANDING PAGE                      *
*                                                                      *
*            PAGINA PRINCIPAL DE CADA REPRESENTACION / PROVEEDOR       *
*                                                                      *
***********************************************************************/

/* 
  CSS styles for a supplier's main landing page (e.g. ~/htdocs/representaciones/novatech/index.html) 
   
  Estilo usado para la pagina principal de cada representación/marca (p.e. ~/htdocs/representaciones/balt/index.html)
*/


div.product-category-groups
{
            align-items: flex-start                    ;
       background-image: radial-gradient( ellipse , #ecf0f8  60%, white  )   ;
       /* background-image: radial-gradient( ellipse , coral  60%, white  )   ; */
             column-gap: 1rem                          ;
                display: flex                          ;
              flex-flow: row                           ;
              flex-wrap: wrap                          ;
        justify-content: center                        ;
                 margin: 0px auto 3rem auto            ;
                padding: 1rem                          ;
                row-gap: 1rem                          ;
              max-width: 85%                           ;
}


div.product-category-group
{
           align-items: center                    ;
            /* background: lightyellow             ; */
                border: 2px dashed #CCCCCC      ;
         border-radius: 0.5rem                    ;
               display: grid                      ;

   grid-template-areas: 
                       '      product-category-group__title      '
                       '   product-categories   '
                       ;
       justify-content: center                    ;
               padding: 0.2rem 1rem 0.5rem 1rem   ;
}


/* Creates a separation space between the last product category <div> 
   and "Para más información dirijase a info@debene.com"               */
div.product-category-group:last-of-type
{
  margin-bottom: 1.75rem;
}


div.product-category-group__title
{
     padding: 1rem 1rem 1rem 1rem   ; 
  text-align: center    ;
}  


span.product-category-group__title
{
         background: #F2F2F2                      ;
             border: outset 2px #8da8bf           ;
      border-radius: 0.5rem                         ;
              color: #1F497D                      ;
            display: inline-block                   ;
          font-size: 1.2rem                         ;
        font-weight: bold                           ;
          grid-area: product-category-group__title   ;
             margin: 0rem 4rem                      ;
            padding: 0.2rem 1rem                    ;
}


div.product-categories
{
       /* background: olive  ; */
       column-gap: 1rem;
          display: flex     ;
   flex-direction: row      ;
        flex-wrap: wrap     ;
  justify-content: center   ;
          row-gap: 1rem     ;
        /* min-width: 100%     ; */
}


/*
  This <a> anchor element corresponds to the large clickable buttons that appear on product Landing pages.
  The "dead" class variation is used for buttons that are not clickable and do not change onMouseOver

  Este elemento <a> corresponde a los grandes botones que aparecen en las páginas de aterrizaje de productos.
  La variante "dead"/"muerto" se usa para botones en los cuales no se puede hacer click y que no
  cambian de aspecto cuando se coloca el mouse por encima.
*/
a.product-category,
a.product-category--dead
{
        align-items: center                     ;
         background: #ecf0f8                  ; 
      /* background: goldenrod              ;   for testing */
             border: 2px solid transparent      ;
      border-radius: 5px                        ;
            display: flex                       ;
     flex-direction: column                     ;
             margin: 0px 0.5rem 0px 0.5px       ;
            opacity: 0.85                       ; 
             /* margin: 0px 0.2rem 0.5rem 0.2rem   ; */
         max-height: 10%                        ;
            padding: 0.2rem 0.4rem              ;
         text-align: center                     ;
    text-decoration: none                       ;
         transition: 250ms                      ;
     vertical-align: bottom                     ;
}


a.product-category--dead
{
  cursor: pointer                    ;
}



a.product-category:hover
{
  background: #dae2f1                               ;
      border: 2px solid #c8c8ea                     ;
  box-shadow: 0.25rem 0.5rem 0.5rem rgb(0,0,0,0.3)  ;
     opacity: 1.00                                    ;
     z-index: 1                                       ;
} 


div.product-category__label
{
     /* background: violet                     ; */
          color: #1F497D                    ;
        display: block                        ;
      font-size: 1.2rem                       ;
    font-weight: bold                         ;
        opacity: 1.00                         ;
        padding: 0.2rem                       ;
         margin: 0.5rem  0.5rem 0rem 0.5rem   ;
}


img.product-category__image 
{
     /* background: white                 ; */
         border: solid 1px transparent   ;
  border-radius: 0.75rem                 ;
         margin: 0.5rem                  ;
     transition: 300ms                   ;
     max-height: 10rem                     ;
      max-width: 85%                     ;
}


/*
  This legend goes beneath the button's image and is used for example to 
  show a brief product description, e.g. 'Catéter de Drenaje con Lazo Fijador'
*/
div.product-category__legend
{
           color: #444   ;
       font-size: 0.9rem   ;
       max-width: 30ch     ;
  padding-bottom: 0.4rem   ;
}


/*
  This legend goes beneath the button's image and is used for example to 
  show the product's catalog numbers, e.g. 'RLC-8-038MB, RLC-10-038MB, RLC-12-038MB, RLC-14-038MB' 
  By default the element is hidden, but it becomes visible when the parent button anchor <a> element is hovered
*/
div.product-category__legend--hidden
{
           color: #444444   ;
       font-size: 0.9rem      ;
          height: 0rem        ;
       max-width: 30ch        ;
         opacity: 0           ;
  padding-bottom: 0.4rem      ;
      transition: all 1s      ;
}


/* 
  This optional table is placed beneath the button's image and it allows side-by-side comparison 
  of two similar products (e.g. ASAP versus ASAPLP aspiration catheters)

  Esta tabla optional se coloca por debajo de la imagen del botón y permite la comparación lado-a-lado
  de productos similares (p.e. los catéteres de aspiración ASAP versus el ASAPLP)
*/
  table.product-category__table
{
  border-collapse: collapse   ;
            width: 100%       ;
}


thead.product-category__table
{
  border: 2px #666 solid;
}


tbody.product-category__table
{
  border: 2px #999 solid;
}


/* Alternate row background colors */
tr:nth-child(odd)
{
  background-color: #f2f2f2;
}


tr:nth-child(even)
{
  background-color: #e0e0e0;
}


th.product-category__table,
td.product-category__table
{
  text-align: left             ;
      padding: 0.3rem 0.6rem   ;
}


th.product-category__table
{
  background: #666        ;
        color: white       ;
    font-size: 1.1rem        ;
      padding: 0.5rem 1rem   ;
}


/*
  Hovering a product category button with the mouse makes visible the hidden legend under the button's image
  Poner el cursor sobre un botón de categorias de productos hace visible la leyenda escondida debajo de la imagen del botón
*/
a.product-category:hover div.product-category__legend--hidden         ,
a.product-category--dead:hover div.product-category__legend--hidden
{  
         color: #1F497D   ;
   font-weight: 500         ;
        height: auto        ;
       opacity: 1           ;
}


/*
  Hovering a product category button with the mouse makes the border 
  of the button image visible 
  Poner el cursor sobre un botón de categorias de productos hace que 
  el borde de la imagén del botón se vuelva visible
*/
a.product-category:hover img.product-category__image 
{
  border-color: #b3c2e5    ;
}