/*
 * file_name = supplier__single_product__stylesheet.css
 *
 * file_type = CSS stylesheet
 *
 * description = this file contains the CSS styles used for pages that are dedicated to 
 *               show a single product (versus a list of products).
 *               The CSS classes organize the information related to the product's name, description,
 *               images and videos, brochure, and available sizes or variants.
 *
 * descripción = este archivo contiene los estilo CSS usados para las paginas dedicadas a un 
 *               solo producto (en vez de una lista de productos). Las clases CSS organizan la información
 *               relacionada al nombre del producto, su descripción, imágenes, folletos 
 *               y las referencias disponibles.
 *
 *
 *            TABLE OF CONTENT         /      ÍNDICE
 *
 *     (1) ➔  GRID LAYOUT              /  PLANTILLA GRID
 *
 *     (2) ➔  PRODUCT NAME             /  NOMBRE DEL PRODUCTO
 *
 *     (3) ➔  PRODUCT IMAGES           /  IMAGENES DEL PRODUCTO
 *
 *     (4) ➔  IMAGE CAROUSEL           /  CARRUSEL DE IMAGENES
 *
 *     (5) ➔  PRODUCT RESOURCES        /  RECURSOS RELACIONADOS AL PRODUCTO
 *
 *        (5.1) ➔  CONTENT ACCORDION VIEW  /  ACORDEON PARA VISUALIZACION DE CONTENIDO
 *
 *        (5.2) ➔  PRODUCT DESCRIPTION     /  DESCRIPCIÓN DEL PRODUCTO
 *
 *        (5.3) ➔  PRODUCT ORDERING INFO   /  REFERENCIAS DEL PRODUCTO
 *
 *     (6) ➔  PRODUCT VIDEOS           /  VIDEOS DEL PRODUCTO
 *
 *     (7) ➔  RELATED PRODUCTS         /  PRODUCTOS RELACIONADO
 *
 *     (8) ➔  PRODUCTS NAVIGATION BAR  /  BARRA DE NAVEGACION PARA PRODUCTOS
 * 
 *     (9) ➔  MEDIA QUERIES            /  CONSULTAS DE MEDIOS
 *
*/



/***********************************************************************
*                                                                      *
*              ➔  GRID LAYOUT /  PLANTILLA GRID                       *
*                                                                      *
***********************************************************************/
/* #region */

/* 
  Container for elements related to a single product
  (product name, images, videos, description, supporting documents, etc.)
*/
div.product
{
            align-items: flex-start      ;
             background: #ecf0f8       ;
          border-radius: 1rem            ;
                display: grid            ;
         grid-auto-flow: column          ;
        justify-content: center          ;

    grid-template-areas: 
                        '   product__name               product__name               '
                        '   product__images             product__navbar             '
                        '   product__resources          product__navbar             '
                        '   product__videos             product__navbar             '
                        '   product__related_products   product__related_products   '
                        ;

  grid-template-columns: 2.5fr minmax(18ch, 1fr)         ;
     grid-template-rows: min-content min-content min-content 1fr min-content   ;

                 margin: 0rem clamp(0.5rem, 2.5%, 10rem)   ;
                row-gap: 2rem;
                padding: 1rem                            ;
}

/*#endregion */



/***********************************************************************
*                                                                      *
*            ➔  PRODUCT NAME  /  NOMBRE DEL PRODUCTO                  *
*                                                                      *
***********************************************************************/
/* #region */

div.product__name
{
       /* background: thistle   ; */
          display: flex            ;
        grid-area: product__name   ;
  justify-content: center          ;
}


h1.product__name
{
      background:rgb(255, 255, 255, 0.9);
      box-shadow: 0px 0px 0.1rem 0rem rgb(0, 0, 0, 0.2)         ,
                  0.125rem 0.125rem 0.2rem rgba(64, 89, 145, 0.541)   ;
           color: #555                    ;
     /* 'display: table' allows the div left and right edges to hug the text within it  */
         display: inline-block              ;
     font-weight: 700                       ;
       font-size: 2rem                   ;
  letter-spacing: 0.1rem                    ;
          margin: 1rem 1rem 0.7rem 1rem     ;
         padding: 0.3rem 2rem 0.3rem 2rem   ;
  /* text-align: center; */
       max-width: 60vw; 
}

/*#endregion */



/***********************************************************************
*                                                                      *
*           ➔  PRODUCT IMAGES  /  IMAGENES DEL PRODUCTO               *
*                                                                      *
***********************************************************************/
/* #region */

div.product__images
{
       /* background: lightgreen      ; */
   /* border-bottom: 1px solid #CCC   ; */
       grid-area: product__images    ;
         padding: 1rem 0.5rem        ;
}


/* This image-specific class is also being made available to <div> elements 
   that are used to create hoverable image maps, so that the <div> element
   scales up and down correctly and proportionately to the <img> element as it resizes */
img.product__image   ,
div.product__image
{
  border-radius: 0.5rem    ;
         cursor: pointer   ;
         margin: 0rem 1rem ;
     /* max-height: 17rem     ; */
          width: clamp(15rem, 90%, 50rem) ;
      /* min-width: 6rem      ; */
     transition: 0.3s      ;
}

/*#endregion */



/***********************************************************************
*                                                                      *
*           ➔  IMAGE CAROUSEL  /  CARRUSEL DE IMAGENES                *
*                                                                      *
***********************************************************************/
/* #region */

/*
//  CAROUSEL
//    A carousel is a slideshow of images that slide horizontally in and out of the field of view. 
//    The image being viewed can be controlled by the user by clicking on on-screen controls 
//    to advance to the next image or return to the previous one.
//
//  CARRUSEL
//    El carrusel es una presentación de imágenes que se deslizan horizontalmente y entran y salen del campo visual.
//    La imágen visualizada puede ser controlada por el usuario usando controles en la pantalla
//    los cuales permiten avanzarar a la imágen siguente o retroceder a la anterior.
*/

div.carousel
{
  background: white    ;
      height: 25rem      ;
      /* margin: 0 auto     ; previous setting */
    /* A relative positioning allows the images to be positioned within this element absolutely */
    position: relative   ;
}


img.carousel__image
{
      cursor: pointer   ;
      height: 100%      ;
  /* object-fit: cover; previous setting */
  object-fit:contain    ;
       width: 100%      ;
}


div.carousel__slides--container
{
  /* background: lightgreen   ; */
      height: 100%           ;
    position: relative       ;
    /* conceal the slide images that overflow the track container */
    overflow: hidden;
}


ul.carousel__slides
{
  /* background: red; */
  height: 100%;
  list-style: none;
  margin: 0rem;
  padding: 0rem;
  /* remove bullet points */
  position: relative;
  transition: transform 750ms ease-in-out;
}


li.carousel__slide
{
  /* background: lightyellow; */
    bottom: 0rem       ;
    margin: 0rem       ;
   padding: 0rem       ;
  position: absolute   ;
       top: 0rem       ;
     width: 100%       ;
}


button.carousel__button
{
     background: rgb(0,0,0,0.05)   ;
         border: 0                   ;
  border-radius: 0.25rem             ;
          color: lightsteelblue    ;
         cursor: pointer             ;
      /* font-size: 2.5rem              ; previous setting */
      font-size: 3rem                ;
    font-weight: bold                ;
        /* padding: 0.5rem              ; previous setting  */
        padding: 0 0.25rem           ;
       position: absolute            ;
      /* to position the botton at the exact vertical halfway heiht */
      transform: translateY(-50%)    ;
            top: 50%                 ;
        z-index: 2                   ;
}


button.carousel__button--left
{
  /* left: -2.5rem; previous setting */
  left: 0.5rem;
}


button.carousel__button--right
{
  /* left: -2.5rem; previous setting */
  right: 0.5rem;
}


/* Used to hide the left control arrow when viewing the first slide in the series,
   and to hide the right control arrow when viewing the last slide in the series
*/
button.carousel__button:hover
{
       color: cadetblue        ;
  background: rgb(0,0,0,0.1)   ;
}


button.carousel__button--hidden
{
  display: none;
}


div.carousel__navigation
{
       /* background: pink   ; */
          display: flex     ;
  justify-content: center   ;
          padding: 0.5rem   ;
}


button.carousel__indicator
{
     background: rgba(0,0,0,0.4)     ;
         border: 0                     ;
  border-radius: 50%                   ;
         cursor: pointer               ;
         /* height: 1rem                ; previous setting */
         height: 0.8rem                ;
         /* margin: 0 0.3rem            ; previous setting */
         margin: 0.1rem 0.4rem         ;
          /* width: 1rem                ; previous setting */
          width: 0.8rem                ;
}


/* CSS selector is for when both classes are present */
.carousel__indicator.current-slide
{
  background: rgba(0,0,0,0.75);
}



/*#endregion */




/***********************************************************************
*                                                                      *
*     ➔  PRODUCT RESOURCES  /  RECURSOS RELACIONADOS AL PRODUCTO      *
*                                                                      *
***********************************************************************/
/* #region */

div.product__resources
{
      /* background: lightseagreen      ; */
         display: flex                 ;
  flex-direction: column               ;
       font-size: 1.2rem               ;
       grid-area: product__resources   ;
         padding: 0rem 1rem            ;
        /* justify-content: center; */
        /* align-items: flex-start; */
}


div.product__resources p
{
      /* background: mistyrose       ; */
       font-size: 1.2rem            ;
         padding: 0rem 1rem          ;
}


a.info_file__link
{
   /* transform: translate(0rem, -0.2rem)   ; */
   transition: all 0.5s ease;
  }


/* 
  When hovered upon, impart a light olive background color to the info_file container
  and make the file preview image nudge up a little bit
*/
a.info_file__link:hover
{
  background: #ecedde                  ;
   transition: all 0.5s ease-in-out        ;
}

/*#endregion */



/***********************************************************************
*                                                                      *
*                    ➔  CONTENT ACCORDION VIEW                        *
*                ACORDEON PARA VISUALIZACION DE CONTENIDO              *
*                                                                      *
***********************************************************************/
/* #region */

/* 
  Container that holds expandable/collapsabile sections.  When the heading of a
  section is clicked on by the user, content for that section is revealed or hidden from view.
  An <input> checkbox element and its linked <label> are used as a toggle switch 
  to turn visibility on or off for the content of each section.
*/
.accordion 
{
     box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2)   ;
  border-radius: 1rem                    ;
         margin: 0rem 0rem 0rem 0rem   ;
       /* so that rounded borders are kept at bottom of accordion */
       /* overflow: hidden   ; */
}

/* Each section that holds product-related info, e.g. product description, or
   brochure/catalog files, or ordering information */
div.accordion__section
{
  position: relative   ;
}


label.accordion__label   ,
div.accordion__content
{
  padding: 1rem;
}


/*
  Text label for each section, e.g. 'Características', 'Documentos', or 'Referencias'
*/
label.accordion__label 
{
   background: #dae2f1               ;
       border: #c6d1eb solid 1px     ;
        color: #1F497D               ;
       cursor: pointer                 ;
      display: block                   ;
  font-weight: 700                     ;
      padding: 1rem 1rem 1rem 2.5rem   ;
     position: relative                ;
   text-align: left                    ;
   transition: all 0.2s ease-in-out               ;
}


label.accordion__label:hover
{
  background: #d9dbbd   ;
  color: sienna;
}


/* on hover change the color of the (+) plus sign from dark blue to brown */
label.accordion__label:hover::before
{
  background-image: url('data:image/svg+xml;utf8,<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg"><polygon points="30,0 50,0 50,30 80,30 80,50 50,50, 50,80 30,80 30,50 0,50 0,30 30,30" style="fill:%23a0522dFF;" ></svg>');
}


/* on hover change the color of the downward triangle icon from dark blue to brown */
label.accordion__label:hover::after
{
  background-image: url('data:image/svg+xml;utf8,<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 100,0 50,50" style="fill:%23a0522dFF;" ></svg>');
}


/* 
   (+) plus sign icon placed immediately to the left of each section title .
   The icon indicates to the user that the section is expandable
*/
label.accordion__label::before
{
   /* ensures that the icon occupies the entire space (height and width) available to it */
   background-size: contain            ;
    /* icon in an SVG file whose code is included on the next line */
  background-image: url('data:image/svg+xml;utf8,<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg"><polygon points="30,0 50,0 50,30 80,30 80,50 50,50, 50,80 30,80 30,50 0,50 0,30 30,30" style="fill:%231F497DFF;" ></svg>');
               top: 1.7rem             ;
           content: ''                 ;
              left: 1rem               ;
          position: absolute           ;
         transform: translateY(-50%)   ;
        transition: transform 0.5s     ;
             width: 0.75rem            ;
            height: 0.75rem            ;
}


/* triangle icon that rotates when a section is expanded or collapsed */
label.accordion__label::after 
{
   /* icon in an SVG file whose code is included on the next line */
   background-image: url('data:image/svg+xml;utf8,<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 100,0 50,50" style="fill:%231F497DFF;" ></svg>');
    /* ensures that the icon occupies the entire space (height and width) available to it */
  background-repeat: no-repeat;
    background-size: contain            ;
            content: ''                 ;
             height: 0.5rem             ;
           position: absolute           ;
              right: 1rem               ;
                top: 50%                ;
          transform: translateY(-50%)   ;
         transition: transform 0.5s     ;
              width: 1rem               ;
}


/* 
  Element that holds the content that will be displayed.
  By default, when the page first loads, the content is hidden
*/
div.accordion__content
{
   background: #ffffff  ;
  line-height: 1.6        ;
    font-size: 0.85em     ;
      display: none       ;
      /* overflow-x: auto ; */
}

/*
  This after:: pseudoelemnts allows floated images, typically within the "Caracteristicas" (Product Description)
  section, to be fully contained vertically within the section rather than overflowing the parent container and hence becoming truncated.
*/
div.accordion__content::after {
  content: "";
  clear: both;
  display: table;
}


/* 
  The <input> checkbox that acts as a binary toggle switch is permanently out of view/invisible 
  The label for the checkbox is what the user clicks on to activate the visibility switch 
*/
input.accordion__input 
{
  display: none   ;
}


/* 
  The tilde '~' selector targets the first sibling with the specified class of 'accordion__content'
*/
input.accordion__input:checked ~ div.accordion__content
{
  display: block;
}

input.accordion__input:checked ~  label.accordion__label
{ 
  background: #d9dbbd ;
       color: sienna;
}


/* 
  When a section title is clicked on, convert the dark blue (+) plus sign 
  to a brown (-) minus sign and make it spin 180 degrees 
*/
input.accordion__input:checked ~ .accordion__label::before
{
  background-image: url('data:image/svg+xml;utf8,<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg"><polygon points="0,30 80,30 80,50 0,50" style="fill:%23a0522dFF;" ></svg>');
        transform: translateY(-50%) rotate(0.5turn);
}


/* 
  When a section title is clicked on, make the triangle icon spin 180 degrees 
*/
input.accordion__input:checked ~ .accordion__label::after 
{
  background-image: url('data:image/svg+xml;utf8,<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 100,0 50,50" style="fill:%23a0522dFF;" ></svg>');

  transform: translateY(-50%) rotate(0.5turn);
}


/*#endregion */



/***********************************************************************
*                                                                      *
*      ➔  PRODUCT DESCRIPTION  /  DESCRIPCIÓN DEL PRODUCTO            *
*                                                                      *
***********************************************************************/

/*
  List used to display product features/advantages
  Lista para enumerar las características/ventajas de un producto
*/
ul.product__description__list
{
           color: sienna   ;
     font-weight: 700         ;
       font-size: 1.2rem      ;
      list-style: none        ;
         padding: 0rem        ;
  /* text-transform: uppercase   ; */
}


/*  Properties of nested list, one level deep/down */
ul.product__description__list ul
{
           color: var(--body__font_color)    ;
     font-weight: var(--body__font_weight)   ;
      list-style: none                       ;
         padding: 0rem                       ;
  /* reset parent element value */
  /* text-transform: none                       ; */

}


img.product__description__image
{
  cursor: pointer;
  float: right                      ;
  margin: 1rem 0rem 0rem 0.75rem           ;
  width: clamp(250px, 30%, 400px)   ;
}

/*#endregion */



/***********************************************************************
*                                                                      *
*      ➔  PRODUCT ORDERING INFO  /  REFERENCIAS DEL PRODUCTO          *
*                                                                      *
***********************************************************************/
/* #region */

/* 
   table where available product variants are listed: i.e. different diameters, lengths,
   shapes, utilizations, amounts, and their corresponding catalog number 
*/
table.product_ordering_info
{
    border-radius: 1rem                  ;
           border: #bdbddb 2px solid   ;
    border-bottom: #bdbddb 6px solid   ;
  border-collapse: collapse              ;
        font-size: 0.8rem                ;
           margin: 0rem 0rem 1rem 0rem   ;
          padding: 0.125rem 0.25rem      ;
            width: 100%                  ;
}


thead.product_ordering_info > tr
{
  border:#bdbddb 2px solid;
  border-bottom: none;
}


thead.product_ordering_info > tr > th
{
  background: #cecee4;
  background: rgb(206, 206, 228, 0.95) ;
       color: #2d2d52 ;
}


th.product_ordering_info::before
{
  border-right: 3px #adadd2 solid;
        bottom: 0          ;
       content: ''         ;
        height: 100%       ;
      position: absolute   ;
         right: -1px       ;
}

/* Modification so that the width of the last table header cell does not appear too thick
   (the table row already imparts a right-side border */
th.product_ordering_info:last-child:before
{
  border-right: none;
}


/* 
  Use the ::after pseudo-element to draw a bottom border on the table's header row 
  This is a work-around because position:sticky of the table header does not allow to set a 
  border the conventional way.
*/
table.product_ordering_info  th.product_ordering_info::after
{
  border-bottom: 4px #bdbddb solid;
         bottom: 0           ;
        content: ''          ;
           left: -1px           ;
       position: absolute    ;
          width: 102%        ;
}


/* style of the table row that displays a section title within the table body */
tbody.product_ordering_info  tr.product_ordering_info__section_title
{
          border: 2px solid #ddd   ;
      border-top: none               ;
       font-size: 1.2rem             ;
         padding: 1rem 1rem          ;
}


/* style of the table header cell containing a section title */
tr.product_ordering_info__section_title th
{
        color: #66a   ;
       padding: 1rem 1rem   ;
}


/* 
  For the table body, alternate the background color of the 
  table rows (darker grey alternating with a lighter grey)
*/
tr.product_ordering_info:nth-child(odd)
{
    background: #f9f9f9   ;
}


tr.product_ordering_info:nth-child(even) 
{
  /* since the background is a bit darker, make the text a bit darker also to preserve contrast/legibility */
         color: #222      ;
    background: #f2f2f2   ;
}


/* hightlight the row on which the mouse is hovering */
tr.product_ordering_info:hover
{
    /* background: #ecedde; optional color, very light olive green */
    background: lightyellow   ;
}



/* style of the table row within the table body */
tbody.product_ordering_info  tr.product_ordering_info
{
           border: 2px solid #ddd   ;
       transition: background 0.10s ease     ;
}


td.product_ordering_info
{
  /* background: lightblue; */
  border: 1px solid #ddd   ;
}


/* style of the table header cells */
th.product_ordering_info
{ 
        font-size: 0.8rem             ;
        padding: 0.25rem 0.5rem       ;
        /* When the user scrolls, keep the table header always visible */
        position: sticky;
        /* so that the table header is not concealed by main navigation bar that also has a postion of sticky */
        top: var(--navbar__main__height);
}


/* style of the table data cell */
td.product_ordering_info
{
          padding: 0.25rem 0.5rem     ;
}


/* hightlight the row on which the mouse is hovering */
td.product_ordering_info
{
    text-align: left   ;
       padding: 0.25rem 0.50rem 0.25rem 0.50rem;
}

/*#endregion */



/***********************************************************************
*                                                                      *
*          ➔  PRODUCT VIDEOS  /  VIDEOS DEL PRODUCTO                  *
*                                                                      *
***********************************************************************/
/* #region */

div.product__videos
{
     align-items: center            ;
      /* background: purple          ; */
         display: flex              ;
       flex-flow: column            ;
             gap: clamp(2rem, 3vmin, 3rem);
       grid-area: product__videos   ;
         padding: 1rem clamp(1rem, 4vmin, 2rem) 2rem clamp(1rem, 4vmin, 2rem)   ;

}


div.product__video
{
  /* background: khaki             ; */
      /* border: green solid 2px   ; */
      height: 0                   ;
  /* hide any content that would otherwise spill out of this container element */
  overflow: hidden;
  /* the percentage bottom padding is derived by the dividing the width:height aspect ratio (16:9)
     of Vimeo.com videos. */
  padding-bottom: 56.25%          ;
  /* allows child <iframe> element to be positioned absolutely */
  position: relative              ;
     width: 80%                   ;
}


div.product__video__title
{
  /* background-color: azure; */
        color: #6b86c6      ;
        /* display: inline-block; */
    font-size: 1.3rem         ;
  font-weight: bold           ;
      padding: 0 0 0.5rem 0   ;
   text-align: center         ;
}

/* 
  The iframe element is used to display product video files that are hosted on other servers, e.g. Vimeo.com 
  The height and width set at 100% ensure that the video completely covers the parent container (div.product__video)

  El eleménto iframe es usado para mostrar videos de productos que residen en otros servidors, p.e. Vimeo.com
  La altura y el ancho tienen un valor de 100% para asegurar que el video abarque por completo el elemento padre (div.product__video)
*/
iframe.product__video
{
  position: absolute   ;
    height: 100%       ;
      left: 0          ;
       top: 0          ;
     width: 100%       ;
}

/*#endregion */



/***********************************************************************
*                                                                      *
*      ➔  RELATED PRODUCTS  /  PRODUCTOS RELACIONADOS                 *
*                                                                      *
***********************************************************************/
/* #region */

div.product__related_products
{
      /* background: lightskyblue              ; */

       grid-area: product__related_products   ;
         padding: 1rem                        ;
         /* 2021-09-13:  display was termporarily set to none because this section is not ready for release yet */
         display: none                        ;
}


div.related__products
{
             /* background: beige      ; */
            align-items: flex-end   ;
                display: flex       ;
              flex-wrap: wrap       ;
         flex-direction: row        ;
        justify-content: flex-start ;
}


h3.related_products
{
           color: #668               ;
       font-size: 1.1rem               ;
          margin: 0rem 0rem 1rem 0rem  ;
      text-align: left                 ;
  text-transform: uppercase            ;
}


a.related_product
{
         /* background: thistle                        ; */
             /* border: 2px solid #ccc                 ; */
              color: var(--body__font_color)        ;
               flex: 0 1 clamp(20rem, 25%, 25rem)   ;
            opacity: 0.8                            ;
            padding: 0rem 0rem 2rem 0rem            ;
    text-decoration: none                           ;
         transition: all 0.4s ease                  ;
}


a.related_product:hover
{
  opacity: 1;
}


img.related_product__image
{ 
     background: white            ;
  border-radius: 1rem               ;
         border: 2px solid #eee   ;
          width: 90%                ;
        padding: 1rem               ;
     transition: all 0.3s ease      ;
}


a.related_product:hover img.related_product__image
{
    box-shadow: 0.25rem 0.25rem 0.5rem rgb(0, 0, 0, 0.2);
}


div.related_product__caption
{
          color: #666   ;
    font-weight: bold      ;
         margin: 0.5rem 0rem 0rem 0rem   ;
}


a.related_product:hover div.related_product__caption
{
    color: var(--body__font_color)   ;
}

/*#endregion */



/***********************************************************************
*                                                                      *
*                   ➔  PRODUCTS NAVIGATION BAR                        *
*                 BARRA DE NAVEGACION PARA PRODUCTOS                   *
*                                                                      *
***********************************************************************/
/* #region */

/* 
  When the page first loads the top level links are visible while the sub-level links are invisible.
  An invisible checkbox <input> element and its linked <label> are used as a binary on/off toggle 
  that the user can click on to make the sub-level links visible or invisible
*/


/* sidebar on the right of screen, used to display a product navigation bar */
aside.product__navbar
{ 
     align-items: center;
      /* background: lightslategrey   ; */
         display: flex;
  flex-direction: column;
       grid-area: product__navbar    ;
         padding: 1rem               ;
}


h3.product__navbar__title
{
             color: #668;
         font-size: 1rem                 ;
       font-weight: 700                  ;
            margin: 0rem 0rem 1rem 0rem  ;
        text-align: left                 ;
    text-transform: uppercase            ;
}


/* navigation bar that lists product categories and product items */
nav.products_navbar
{
  /* background: aquamarine   ; */
   font-size: 0.8rem         ;
  text-align: left           ;
}


/* The checkbox is used as a binary on/off toggle to make the sub level links visible or invisible */
input.products_navbar__top_level__input
{
  display: none ;
}


label.products_navbar__top_level__label
{
      /* background: coral   ; */
    /* invisible border is set to prevent pixel jumps on hover */
    border-color: transparent       ;
    border-radius: 0.5rem           ;
    border-style: solid             ;
    border-width: 2px 2px 0px 2px   ;
           color: #555            ;
          cursor: pointer           ;
         display: block             ;
     font-weight: 700               ;
     line-height: 2                 ;
         padding: 0.4rem            ;
      transition: background 0.1s   ;
      text-align: left              ;
}


label.products_navbar__top_level__label:hover
{
    /* ligth olive greeen color */
    background: #d9dbbd           ;
         color: var(--body__font_color)   ;
}


/* When a Product Category is selected, outline it with an olive-colored border */
input.products_navbar__top_level__input:checked ~ label.products_navbar__top_level__label
{
  /* border only on 3 sides (no bottom border) */
                border-color: olive             ;
   border-bottom-left-radius: 0rem                ;
  border-bottom-right-radius: 0rem                ;
                       color: var(--body__font_color)   ;
}


/* 
  Place a (+) plus sign to the left of top level navigation buttons to 
  show that they are expandable 
*/
label.products_navbar__top_level__label::before
{
      background: lavender               ;
          border: 1px solid #ccc         ;
         content: '＋'                     ;
       font-size: 1rem                     ;
     font-weight: bold                     ;
          margin: 0rem 0.50rem 0rem 0rem   ;
         padding: 0rem 0.1rem              ;
  vertical-align: middle                   ;
}


/* When the top level navigation button is clicked on, change the (+) plus sign to a (-) minus sign */
input.products_navbar__top_level__input:checked ~ label.products_navbar__top_level__label::before
{
           color: #666         ;
         content: '\2012'        ;
         padding: 0rem 0.33rem   ;
  vertical-align: sub            ;
}


/* When the top level navigation button is clicked on, change its background color to show it was selected */
input.products_navbar__top_level__input:checked ~ label.products_navbar__top_level__label
{
    background:  #d9dbbd;
}


/* By default, when the page loads, hide the sublevel links of the navbar */
div.products_navbar__sub_level__links
{ 
     background: honeydew                    ;
  border-radius: 0.5rem                        ;
     max-height: 0rem                          ;
       overflow: hidden                        ;
     transition: max-height 0.1s ease-in-out   ;
}


/* When a top-level button is clicked, expand the <div> elements that contains the children sub-level buttons */
input.products_navbar__top_level__input:checked ~ div.products_navbar__sub_level__links
{
  /* border only on 3 sides (no bottom border) */
             border-color: olive           ;
             border-style: solid             ;
   border-top-left-radius: 0rem              ;
  border-top-right-radius: 0rem              ;
             border-width: 0px 2px 2px 2px   ;
               max-height: 100vh             ;
            /* transition: max-height 0.1s ease-in-out   ; */
            margin-bottom: 0.5rem;
}


/* set the indent from the left for the sub-level links and the right padding*/
ul.products_navbar__sub_level__links
{
    margin-left: 1rem  ;
  padding-right: 1rem  ;
}


li.products_navbar__sub_level__link
{
   /* background: mistyrose; */
       /* border: solid 1px red; */
  margin-left: 1.5rem      ;
    font-size: 0.8rem      ;
}


/* For sub-level links, chnage the default bullet point to a right pointing arrow */
li.products_navbar__sub_level__link::marker
{
  color: #666;
  content: '\279C';
}


/* Make the marker (e.g. a right pointing arrow) a bit darker on hover */
li.products_navbar__sub_level__link:hover::marker
{
        color: #333    ;
      /* content: '\27A4'   ; */
}


/* 
   Dead links are not clickable and, if clicked, go nowhere.
   They are used for the current page that the user is viewing  
*/
li.products_navbar__dead_link
{
  /* background: coral   ; */
  margin-left: 1.5rem;
}


/* 
   Use a slightly larger right arrow (1 rem instead of 0.8rem )
   for the link that belongs to the current page 
*/
li.products_navbar__dead_link::marker
{
        color: #666    ;
      content: '\279C'   ;
    font-size: 1rem      ;
}


a.products_navbar__link
{
           /* The transparent border prevents pixel jumps during hover events */
           border: 1px solid transparent  ;
            color: #666                 ;
          padding: 0.25rem 0.5rem 0.25rem 0.5rem;
      font-weight: 700                    ;
  text-decoration: none                   ;
}


/* Highlight links that are hovered upon */
a.products_navbar__link:hover
{
       background: lightyellow      ;
           border: 1px solid #ccc   ;
            color: #333             ;
      font-weight: 700                ;
          padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  text-decoration: none               ;
}


/* 
  Dead links are not clickable and, if clicked, go nowhere.
  They are used for the current page that the user is viewing
*/
a.products_navbar__dead_link
{
       background: lightyellow       ;
           border: 1px solid #ccc    ;
            color: #444              ;
           cursor: default             ;
       font-style: italic              ;
      font-weight: 700                 ;
          padding: 0.25rem 0.5rem      ;
  text-decoration: none                ;
}

/*#endregion */



/***********************************************************************
*                                                                      *
*           ➔  MEDIA QUERIES  /  CONSULTAS DE MEDIOS                  *
*                                                                      *
***********************************************************************/
/* #region */

/* Display layout for narrower screens (tablets and smart phones)
   All the content is displayed in a single column */
@media only screen and (max-width: 650px)
{
  div.product
  {
              /* align-content: center                   ; */
              /* grid-auto-flow: column; */
  
        grid-template-areas: 
                            '   product__name               '
                            '   product__images             '
                            '   product__resources          '
                            '   product__videos             '
                            '   product__navbar             '
                            '   product__related_products   '
                            ;
      grid-template-columns: 1fr                      ;
                    /* set margins to zero so that more of the width of the small mobile device screen is used */
                    margin: 0rem                     ;
  }


  h1.product__name
  {
    max-width: min-content;
  }


  div.carousel
  { 
    /* background: lavender   ; */
       display: inline-block   ;
    max-height: 12rem          ;
    /* Stipulate a width that allows enough lateral space for the 
       left and right slide forward and slide back arrows         */
         width: 90%            ;
  }

  
  button.carousel__button--left
  {
    left: -2rem;
  }


  button.carousel__button--right
  {
    right: -2rem;
  }


  h3.related_products
  {
    text-align: center   ;
  }


  div.related__products
  {
      justify-content: center   ;
  }


  a.related_product
  {
    padding: 1.5rem 0rem 1.5rem 0rem            ;
  }
  

  h3.product__navbar__title
  {
    text-align: center   ;
  }
}



/* 
  Display layout for narrower screens (tablets and smart phones).
  All the content is stacked vertically and displayed in a single column.
*/
@media only screen and (max-width: 800px)
{
  thead.product_ordering_info
  {
            display: none   ;
  }

  table.product_ordering_info
  {
             border: none  ;
  }


  /* Remove yellow row highlight */
  tr.product_ordering_info:hover
  {
    background: transparent;
  }


  tr.product_ordering_info:nth-child(odd)
  {
      background: #f9f9f9   ;
  }


  tr.product_ordering_info:nth-child(even) 
  {
    /* since the background is a bit darker, make the text a bit darker also to preserve contrast/legibility */
           color: #222      ;
      background: #f2f2f2   ;
  }


  /* Restore top border for this element */
  tr.product_ordering_info__section_title th
  {
    border: solid 2px #ddd;
  }


  /* Separate rows vertically so they are not glued together */
  tr.product_ordering_info
  {
    display: block   ;
     margin: 2rem 0rem    ;
  }


  td.product_ordering_info
  {
       display: block      ;
     /* Prevents the label pseudo-element (e.g. 'No. de Catálogo') from overlapping
        with data value due to this absolute positioning */
     min-width: 20rem      ;
      position: relative   ;
    text-align: right      ;
  }


  td.product_ordering_info:hover
  {
      background: lightyellow   ;
           color: #000          ;
  }

  td.product_ordering_info::before
  {
    /* background: mistyrose              ; */
        display: inline                  ;
        content: attr(data-label) ': '   ;
    font-weight: 700                     ;
           left: 0.5rem                  ;
       position: absolute                ;
  }

  div.product__video__title
  {
    /* background: lightsalmon; */
    font-size: 1.2rem;
    padding: 1rem 0 0.5rem 0;
  }

}

/*#endregion */