/*

AUTOPREFIXER: https://autoprefixer.github.io/;

Modal fx: https://postare.github.io/bulma-modal-fx/;

html {

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
background: #fff;
color: #212121;
}
*/


/*------------------------------------*\
RESET
\*------------------------------------*/


/* https://meyerweb.com/eric/tools/css/reset/ 
v2.0b1 | 201101 
NOTE:WORK IN PROGRESS
USE WITH CAUTION AND TEST WITH ABANDON */




/* Palette generated by Material Palette - materialpalette.com/amber/deep-orange 

.dark-primary-color    { background: #FFA000; }
.default-primary-color { background: #FFC107; }
.light-primary-color   { background: #FFECB3; }
.text-primary-color    { color: #212121; }
.accent-color          { background: #FF5722; }
.primary-text-color    { color: #212121; }
.secondary-text-color  { color: #757575; }
.divider-color         { border-color: #BDBDBD; }

*/


/* colors triada: 
oca: #B3A317;
blau cel: #54E4FF;
rosa: #CC1B67;
rosa fosc: #B3205F;

complementaris:
oca: #B3A317 ;
blau: #2C05B3;
lilós: #663BFF;

*/

/* Definició de colors */

:root {
  --groc-corporatiu: #FFEB3B;
  --groc-50: #FFFDE7;
  --groc-100: #FFF9C4;
  --groc-200: #FFF59D;
  --groc-300: #FFF176;
  --groc-400: #FFEE58;
  --groc-500: #FFEB3B;
  --groc-600: #FDD835;
  --groc-700: #FBC02D;
  --groc-800: #F9A825;
  --groc-900: #F57F17;
  --groc-A100: #FFFF8D;
  --groc-A200: #FFFF00;
  --groc-A400: #FFEA00;
  --groc-A700: #FFD600;

  --vermell-oferta: #CC1B67; /* #e53935; */
  --oferta:  #CC1B67; /* #e53935; */
  --vermell-alerta: #B3205F ; /* #D50000 #DE0021 */
  --alerta: #B3205F ; /* #D50000 #DE0021 */
  --exit: green ;
  --color-alerta: #ab000d ;
  --color-warning: #FF6F00 ; 
  --color-success: #33691E; 
  --rosa: #E91E63; /* rosa samarreta #ff298f */
  --rosa: #CC1B67;
  --negre: #212121;
  --gris: #757575;
  --gris-fosc: #363636;
  --gris-clar: #dddddd; 
  --gris-inactiu: #c3c3c3;
  --gris-ultraclar: #f5f5f5; 

  /*  --font-standard: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; */
  --font-standard: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /*--font-standard: 'Open Sans', Arial, Helvetica, sans-serif;*/


  --font-xsmall: 0.6rem;
  --font-small: 0.85rem;
  --font-normal: 1rem; /* 15px; */
  --font-medium: 1.25rem;
  --font-large: 1.5rem;
}


  @media screen and (max-width: 768px) {

    :root {
      --font-medium: 1.25rem;
      --font-large: 1.5rem;
    }
}



/* ESTRUCTURA DE LA PÀGINA **************************/

body {
  align-items: flex-start;
  -ms-align-items: flex-start;
  display: flex;
  -ms-display: flex;
  flex-direction: column;
  -ms-flex-direction: column;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  height: auto;
  min-height: 100vh!important;
}

body>header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
      -ms-flex-direction: column; 
          flex-direction: column;
  background-color: var(--groc-corporatiu);
  
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 30;
}

body>main {
  -webkit-box-flex: 1;
          flex: 1;
  -ms-flex: 1;
  /*overflow: hidden;*/ /* el desactivo per poder posar sticky dins main; */
}

body>footer {
  -ms-flex-item-align: end;
  align-self: flex-end; 
}

/* ordre estructura principal */
#barraAvisos  {-webkit-box-ordinal-group: 1;-ms-flex-order: 0;order: 0; width: 100%;}
body>header   {-webkit-box-ordinal-group: 2;-ms-flex-order: 1;order: 1; width: 100%;}
#barraBanner  {-webkit-box-ordinal-group: 3;-ms-flex-order: 2;order: 2; width: 100%;}
body>main     {-webkit-box-ordinal-group: 4;-ms-flex-order: 3;order: 3; width: 100%;}
#barraPeu     {-webkit-box-ordinal-group: 5;-ms-flex-order: 4;order: 4; width: 100%;}
#pre-footer   {-webkit-box-ordinal-group: 6;-ms-flex-order: 5;order: 5; width: 100%;}
body>footer   {-webkit-box-ordinal-group: 7;-ms-flex-order: 6;order: 6; width: 100%;}

body>header.ombra {
 -webkit-box-shadow: 0 0 .75rem rgba(0,0,0,0.15);
         box-shadow: 0 0 .75rem rgba(0,0,0,0.15);   
}

@media (max-width: 1023px) {

  body>header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: reverse; 
        -ms-flex-direction: column-reverse; 
            flex-direction: column-reverse; 
  }

}

@media (max-width: 768px) {

body.nofooter .footer,
body.nofooter #pre-footer,
body.nofooter #barraPeu
 {display: none;}

}


/******************************************************/

html {
  scroll-behavior: smooth;
}


/* correccions generals als estils de bulma */
a {
  color: var(--groc-900);
  /*color: #0062bd;*/
  transition: all 0.15s ease-in-out;

}

.breadcrumb a {color: var(--gris-fosc);}
.tabs li.is-active a {color: var(--groc-900); border-bottom-color: var(--groc-900)}


.title {font-size: var(--font-large); font-weight: 700 }
.subtitle {font-size: var(--font-medium); font-weight: normal; color: var(--negre) }
.title, .subtitle { line-height: 1.2em; }

.notes {font-size: var(--font-small)}

.text p {margin-bottom: .5em;}
.text ul {
  margin: 0.5em 0 .75em;
  list-style: disc;
  padding-left: 1.5em;
}

.section { padding: 1.5rem 0.75rem; }

.section.fonscolor {background-color: var(--groc-A100)}
.section.fonsgris {background-color: var(--gris-ultraclar)}

.modal {z-index: 1000}

.level:not(:last-child) {margin-bottom: 1rem;}

.level.is-mobile .level-left {display: block }
.level-left, .level-right {flex-shrink: initial;}


.input.is-active, 
.input.is-focused, 
.input:active, 
.input:focus, 
.textarea.is-active, 
.textarea.is-focused, 
.textarea:active, 
.textarea:focus,
.select select.is-active, 
.select select.is-focused, 
.select select:active, 
.select select:focus { 
  border-color: var(--groc-A700); 
  box-shadow: 0 0 0 0.125em rgba(255,235,59,.25);
}

.select:not(.is-multiple):not(.is-loading)::after {
  border-color: var(--groc-900);
}

#fitxaTags .section {padding: 0;}


input.is-danger + p.help,
input.is-danger + a + p.help  {
  color: #ff3860;
}

.menu-list a.is-active {
    background-color: var(--groc-500);
    color: var(--negre);
}

@media screen and (max-width: 768px) {
    
#fitxaTags  .title:not(:last-child) { margin-bottom: 1rem; }
}


/* per fer clicable la icona dels input passwords */
.control.has-icons-right.clicable .icon {pointer-events: auto; cursor: pointer !important; }

.field-body p:not(:first-of-type) {margin-top: 0;} 



#barramenu,
.hero.is-primary {background-color: var(--groc-corporatiu)}
.hero-foot {background-color: var(--groc-500); }

.hero-body {
  padding: 1rem 0 0;
}

#news .hero.is-primary {background-color: var(--gris-ultraclar)}


@media screen and (min-width: 769px) {

body:not(#home)>header {     
 -webkit-box-shadow: 0 0 .75rem rgba(0,0,0,0.15);
         box-shadow: 0 0 .75rem rgba(0,0,0,0.15); 
  }

  .hero.is-medium .hero-body {
    padding-bottom: 0;
    padding-top: 0.5rem;
  }
  .hero-body { padding: 3rem 1.5rem }
  .hero-foot {border-top: 2px solid white; margin-top: .5em}

}

#continguts {padding: 1rem 0;} 

@media all and (max-width: 1087px) {
  #continguts {padding: 1rem}
}


.principal p, 
.principal h2,
.principal h3,
.principal h4 {
  margin-bottom: .5em;
}
/*
.is-size-1,
.is-size-2,
.is-size-3,
.is-size-4 { line-height: 110%; margin-bottom: 1em }

.is-size-5 { line-height: 110%; }


.principal h2,
.principal h3 {
  font-size: var(--font-medium); 
  color: var(--negre); }

  .principal ul li {list-style: disc; margin-left: 1em}

  .principal .producte-card ul li {margin: 0; line-height: 100%}
  .principal .producte-card h3 {margin: 0 1.5em .25em 0; font-weight: bold;}

  */


  /*links genèrics */
  .principal p a,
  .principal ul a,
  .principal label a,
  .producte-info h3 a,
  .producte-info h4 a,
  .blog .subtitle a,
  #videos h2 a,
  #resultatsBlog .subtitle a,
  .blog .content a {
    color: var(--gris-fosc);
    border-bottom: 2px solid var(--groc-500);
  }

  .principal p a:hover,
  .principal ul a:hover,
  .principal label a:hover,
  .producte-info h3 a:hover,
  .producte-info h4 a:hover,
  .blog .subtitle a:hover,
  #videos h2 a:hover,
  #resultatsBlog .subtitle a:hover,
  .blog .content a:hover  {
    background-color:  var(--groc-500);
    color: #111111;
  }

  #videos h2 a  {font-weight: bold}

  .principal .tabs a:hover {background-color: transparent}
  .principal .tabs li:not(.is-active) a {border: none; }
  .breadcrumb ul li {margin: 0}
  .principal .breadcrumb a {padding: 0 .5em; border-bottom: none;}
  /*.breadcrumb:not(:last-child) {margin-bottom: 1rem} */
  .breadcrumb, .breadcrumb:not(:last-child) {margin-bottom: 1rem}


  .breadcrumb ul li.is-active a,
  .notification a {border-bottom: none}


  /* quadres d'alerta */
  .notification.is-warning { background-color: white; border: 2px solid var(--groc-500); color: var(--gris); }
  .notification.is-danger  { background-color: white; border: 2px solid var(--alerta); color: var(--gris-fosc); }
  .notification.is-primary { background-color: var(--groc-500); border: 2px solid var(--groc-500); color: var(--negre); }

  .notification.petita {
    font-size: var(--font-small);
    margin-bottom: 1em;
    padding: 1em 2.5em 1em 1.5em;
  }

  #aviscookies.notification {background-color: var(--negre); color: var(--gris-ultraclar); border-radius: 0;  }
  #avis18.notification {background-color: var(--groc-A400); color: var(--negre); border-radius: 0; margin-bottom: 0;}
  #aviscookies.notification strong {color: var(--groc-A400);}
  #avis18.notification strong {color: var(--alerta2);}

  #notificacionsEntrada {
    left: 0;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 100;
    font-size: var(--font-small)
  }

  #notificacionsEntrada .material-icons {font-size: 1.5em; vertical-align: middle; }

  .box.is-warning { border: 2px solid var(--groc-500); box-shadow: none }




  /*.avis {color: green;}*/
  .oferta, .oferta strong {color: var(--alerta); font-weight: bold}
  .alerta, .alerta strong {color: var(--alerta);}
  .success, .success strong {color: var(--color-success);}
/*
  .sticky {
    position: sticky;
    top: 7rem; 
  }
  */

  /*botons */

  .button {
    border-radius: 3px;
    transition: .1s ease-in-out;
    transition-property: color,background-color,border-color;
    background-color: transparent;
  } 


.button.is-primary {
 /* color: var(--negre);
  border-color: #FBC02D;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-weight: bold;
  color: #212121;
  background-color: #FFEE58;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FFEE58), to(#FBC02D));
  background-image: -webkit-linear-gradient(top, #FFEE58, #FBC02D);
  background-image: -moz-linear-gradient(top, #FFEE58, #FBC02D);
  background-image: -ms-linear-gradient(top, #FFEE58, #FBC02D);
  background-image: -o-linear-gradient(top, #FFEE58, #FBC02D);
  background-image: linear-gradient(to bottom, #FFEE58, #FBC02D);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FFEE58, endColorstr=#FBC02D);
*/


}


.button.is-primary, 
.button.is-secondary {
  font-weight: bold; 
  border-width: 2px;
border-radius: 5px}


  .button.is-primary {
    color: var(--negre);
    background: linear-gradient(#FFF176, #FFEB3B);
    border: 2px solid var(--groc-600);
  }

  .button.is-primary.is-active, 
  .button.is-primary:active,
  .button.is-primary:hover {
    background-color: var(--groc-A400);
    border-color: var(--groc-A400);
    color: var(--negre);
  }

  .button.is-secondary {
    background-color: var(--negre);
    border: 2px solid #111111;
    color: var(--gris-ultraclar);
  }

  .button.is-secondary.is-active, 
  .button.is-secondary:active,
  .button.is-secondary:hover {
    background-color: #111111;
    border-color: #111111;
  }


  @media screen and (max-width: 768px) {

/* desconnectem el botó fixat al peu x UX */
/*
  .boto-fixat-peu-mobile {
    display: block;
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 10000;
    padding: 1rem;
    background: #fff;
    background-color: var(--groc-corporatiu);
    border-top: 1px solid var(--groc-A700);
}

.boto-fixat-peu-mobile input[type="checkbox"].material + label:before {
color: var(--gris);
}
*/

}

  /* videos */

  .flex-video {
    position: relative;
    padding-top: 25px;
    padding-bottom: 67.5%;
    height: 0;
    margin-bottom: 16px;
    overflow: hidden
  }

  .flex-video.widescreen {
    padding-bottom: 57.25%
  }

  .flex-video.vimeo {
    padding-top: 0
  }

  .flex-video iframe,
  .flex-video object,
  .flex-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
  }


#videos .card {
  height: 100%;
}

.#videos .card-image figure {
  background-color: #FFF;
    position: relative;
}

.#videos .card-image figure:before {
    font-family: "Material Icons";
    content: 'zoom_in';
    font-size: 500%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    opacity: .8;
}


  /* Mega menu ***********************************************************/


#catalegDropdown .pinterest {
  max-height: 500px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-flow: column wrap;
           flex-flow: column wrap;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
           justify-content: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
          align-items: flex-start;
}

#catalegDropdown .ac {
  width: calc(100% /4);

}
#catalegDropdown .ac .ac-a {
  width: 90%;

}


@media screen and (max-width: 1023px) {
  #catalegDropdown .pinterest {
      display: block;
      max-height: none;
  }

.navbar-dropdown .ac1r {font-size: var(--font-normal)}


}

  .button i {margin-right: 0.25em;}

  .navbar.is-fixed-bottom, .navbar.is-fixed-top {
    z-index: 100;
  }

  .navbar {
    background-color: var(--groc-500);
  }

  .ombra-navbar {
    -webkit-box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.1);
    -moz-box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.1);
    box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.1);
  }


  .navbar-item.has-dropdown.is-active .navbar-link, 
  .navbar-item.has-dropdown:focus .navbar-link, 
  .navbar-item.has-dropdown:hover .navbar-link, 
  .navbar-start .navbar-item.has-dropdown.is-active .navbar-link, 
  .navbar-start .navbar-item.has-dropdown:hover .navbar-link,
  .navbar-dropdown .navbar-item, 
  .navbar-dropdown.navbar-link {
    background-color: var(--negre);
    color: var(--gris-clar);
  }

  .navbar-dropdown .navbar-divider {background-color: var(--gris-fosc)}

  .navbar-end {font-size: var(--font-small)}

  .navbar-dropdown {border-top: 0;}

  .navbar-dropdown button.navbar-item {
    border: none; 
    display: block; 
    width: 100%; 
    text-align: left;
  }
  
  .navbar-dropdown button.navbar-item:hover {
    cursor: pointer; 
    background-color: #f5f5f5;
    color: #0a0a0a;
  }

  .navbar-link.is-active, 
  .navbar-link:hover,
  a.navbar-item.is-active, 
  a.navbar-item:hover {
    background-color: var(--negre);
    color: var(--gris-clar);
  }

    #comandaTelefonica {background-color:  var(--negre); }
    #comandaTelefonica .navbar-link {color: var(--groc-500);}
    #comandaTelefonica .material-icons {font-size: 1.5em}



  #iconesMobile .navbar-link.is-active, 
  #iconesMobile .navbar-link:hover,
  #iconesMobile a.navbar-item.is-active, 
  #iconesMobile a.navbar-item:hover {
    color: var(--negre);
  }



  a.navbar-item {transition: background-color .2s ease-in, color .2s ease-in; }

  .navbar-end .navbar-link:hover { color: var(--negre); }

  .navbar-link i.fas {color: var(--gris-fosc); margin-right: .3em} 

  .navbar-link:not(.is-arrowless)::after {
    border-color: var(--groc-900);
  }

  .navbar-end .navbar-link:not(.is-arrowless)::after {
    border-color: var(--negre);
  }

  .navbar-item, .navbar-link {color: var(--negre);}


  .navbar-item.is-mega {
    position: static;
  }

  .navbar-item.is-mega .is-mega-menu-title {
    margin-bottom: 0;
    margin-top: 1rem;
    padding: .375rem .5rem;
    text-transform: uppercase;
    color: var(--groc-500);
  }

  .navbar-item.is-mega .is-mega-menu-title a {
    color: var(--groc-500); 
  }

  .navbar-dropdown .navbar-item
  .is-mega .navbar-item {
    padding: 0
  }

  .is-mega .navbar-dropdown {
    background-color: var(--negre);
    padding-bottom: 1rem;
  }

  .is-mega a.navbar-item {
    color: var(--gris-clar);
    border-bottom: 2px solid var(--gris-fosc);
    display: block;
    line-height: 1.5;
    padding: .2rem .5rem;
    position: relative;

    overflow: hidden;
    text-overflow: ellipsis;
  }

  .is-mega a.navbar-item.es-oferta {background-color: var(--rosa); border-color: var(--rosa);}
  .is-mega a.navbar-item.es-oferta:before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-standard);
    content: '%';
    font-size: var(--font-medium);
    font-weight: 900;

    margin-right: .25em;
  }


  /* menu idiomes i divisa */
  #barramenu1 .navbar-end .navbar-dropdown,
  #barramenu1 .navbar-end .navbar-dropdown .navbar-item,
  #barramenu1 .navbar-end .navbar-link:hover,
  #barramenu1 .navbar-item.has-dropdown:hover .navbar-link  {
    background-color: white; color: var(--negre); 
    font-size: var(--font-small)
  }


/* pq es vegin els menus al edge */
@media (min-width: 1024px) {
     .navbar-item.is-hoverable:hover .navbar-dropdown {
        display: block;
        }
    }


  @media screen and (max-width: 1023px) {

    #menuPrincipal {background-color: var(--negre); padding-top: .75rem; padding-bottom: .75rem;}

    #menuPrincipal .column {padding: 0 .75rem;}  

    #menuPrincipal .navbar-item, 
    #menuPrincipal .navbar-link {
      color: white;
      background-color: var(--negre);
    }
    #menuPrincipal .button {color: var(--gris-clar)} 

    #menuPrincipal .button.is-selected {color: var(--negre)} 
    

    #menuPrincipal .navbar-item { 
      padding: 0.25rem 1rem;
      border-bottom: 1px solid var(--gris-fosc);
    }

    #menuPrincipal .navbar-item.has-dropdown {padding: 0;}
    #menuPrincipal .navbar-item.has-dropdown:last-child {margin-bottom: 1rem;}

    #menuPrincipal .navbar-item {border-bottom: 1px solid var(--gris-fosc);} 

    #menuPrincipal .navbar-item.has-dropdown {border: none;} 

    .navbar-dropdown {padding-top: 0;}
    .navbar-dropdown .navbar-item {padding: 0; margin: 0}
    .navbar-menu { padding: 0; }
    .navbar-item.is-mega .is-mega-menu-title {padding: 0.12rem 1rem;}


    #menuPrincipal .navbar-item.ofertes,
    #menuPrincipal .navbar-item.selectorLlavors,
    #menuPrincipal .navbar-item.elMeuCompte {
      padding: 0 1rem;

    }

    #menuPrincipal .navbar-item.ofertes:before,
    #menuPrincipal .navbar-item.selectorLlavors:before,
    #menuPrincipal .navbar-item.elMeuCompte:before {
    font-family: "Material Icons"; /* abans Sharp */
    content: "local_offer"; 
    vertical-align: middle;
    margin-right: .125em;
    color: var(--oferta);
    font-size: 1.5rem;
  } 


#menuPrincipal .ac-a .navbar-item:last-child {
    border-color: none;
}



#menuPrincipal .navbar-item.selectorLlavors:before {
  content: "search" ;
  color: var(--groc-corporatiu);
}

#menuPrincipal .navbar-item.elMeuCompte:before {
  content: "person" ;
  color: var(--groc-corporatiu);
}

}

  @media screen and (min-width: 1088px) {
    .navbar-dropdown {
      background-color: var(--negre);
    }
  }

  .search-box input {
    cursor: pointer;
    width: 8rem;
    color: var(--gris);
    display: inline-block;
    border: 1px solid var(--groc-corporatiu);
    border-radius: 2px;
    font-size: .9rem;
    line-height: 2rem;
    padding: 0 .5rem 0 2rem;
    outline: none;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    background: #fff url(/static/img/lupa-cercador.svg) .6rem .5rem no-repeat;
    background-size: 1rem;
  }

  /* suggeriments en el botó de cerca */

  #suggestions {
    display: none;
    position: absolute;
    top: 2.25rem;
    left: 1rem;
    display: inline-block;
    font-size: var(--font-small);
  }


.navbar-item #suggestions img {
    width: fit-content;
    height: auto;
    max-height: 500px;
}

  #searchresults {    
    background-color: white;
    padding: 1em;
    width: 33vw;
    border-radius: 5px;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.1);
    line-height: 1.4em;
  }

  #searchresults a {
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    padding: 0.2em 0;
    color: var(--negre);
  }

  #searchresults a:hover {color: #111;}

  #searchresults a:last-child {
    border-top: 1px solid var(--gris-clar);
    margin-top: 1em;
    padding: .5em 0 0;
    color: var(--groc-900);
  }
  #searchresults a:last-child:before {
    font-family: "Material Icons"; /* abans Sharp */
    content: "search"; 
    vertical-align: middle;
    margin-right: .1em;
    font-size: var(--font-normal);
  } 

  #searchresults .menu-label {
    border-bottom: 1px solid var(--gris-clar);
    margin-bottom: 0.25em;
    padding-bottom: 0.25em;
    display: block;
  }

#searchresults a.afinarCerca,
#searchresults a.correccioCerca,
#searchresults .infoCerca {
  display: flex; 
  font-size: var(--font-small); 
  font-style: oblique;
  color: var(--gris);    }

#searchresults a.afinarCerca,
#searchresults .campanyaCerca {
  padding: 0.5em; 
  background-color: var(--groc-100); 
  margin-bottom: 0.5em ;
  border-radius: 3px;
  } 

#searchresults a.correccioCerca,
#searchresults a.afinarCerca strong {
  color: var(--groc-900); 
}
#searchresults .campanyaCerca {
  background-color: var(--oferta);
  color: white;
  font-weight: 700;
}

a.afinarCerca:before,
a.correccioCerca:before,
.infoCerca:before,
.blogCerca:before,
.videoCerca:before,
.campanyaCerca:before {
    font-family: "Material Icons"; /* abans Sharp */
    content: "search";
    vertical-align: top;
    margin-right: .15em;
    color: var(--groc-900); 
    font-weight: normal;
    font-size: 1.5em;
    font-style: normal;
    padding-top: .15em;   
  }

.infoCerca:before {content: "info"; font-size: 1.25em; margin-right: .35em; padding-top: 0; }
.blogCerca:before {content: "subject"; font-size: 1.25em; color: var(--gris); }
.videoCerca:before {content: "videocam"; font-size: 1.25em; color: var(--gris); }
.campanyaCerca:before {content: "local_offer"; font-size: 1.25em; color: white; }


.pagResultatsCerca .campanyaCerca {  }
.pagResultatsCerca .notification a.campanyaCerca { text-decoration: none; color: var(--negre); font-weight: bold; font-size: var(--font-medium) }
.pagResultatsCerca .campanyaCerca:before {font-size: 1.25em; color: var(--oferta); }


  @media screen and (max-width: 768px) {

    #suggestions {left: 1rem; top: 2rem; margin-right: 4.1rem}

    #searchresults { width: 100% } 
  }


  /* efecte acordió en menú principal, versió mobile */

  @media screen and (min-width: 1024px) {

    #menuPrincipal .ac-a {height: auto !important; } 

  }

  @media screen and (max-width: 1023px) {

#menuPrincipal {
  max-height: calc(100vh - 3.25rem);
  overflow-y: auto;
}


#catalegDropdown .ac {
  width: 100%;

}
#catalegDropdown .ac .ac-a {
  width: 100%;

}

#catalegDropdown .ac {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: auto;
    border-bottom: 1px solid var(--gris-fosc) ;
  }

#catalegDropdown .ac .ac-q {
    text-decoration: none;
    display: block;
    cursor: pointer;
    position: relative;
  }

#catalegDropdown .ac .ac-q::after {
 /*   content: '\25bc';
    text-align: center;
    width: 1rem;
    right: 0rem;
    top: 50%;
    padding: 1rem;
    margin: 0 1rem;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    font-size: 1rem;
    color: white;
*/

position: absolute;
    right: 0rem;
    top: 0%;
    margin: 0 1rem;

  font-family: 'Material Icons';
  content: 'keyboard_arrow_down';
  color: var(--groc-900);   
  font-weight: normal;
  font-style: normal;
  font-size: 1.5rem;  /* Preferred icon size */
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  padding: 0.25rem 0;
  

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';


}

 #catalegDropdown .ac.is-active > .ac-q::after {
    content: 'keyboard_arrow_up'; /* '\2013'; */
  }

#catalegDropdown .ac .ac-a {
    overflow-y: scroll;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
  }

#catalegDropdown .ac.js-enabled > .ac-a {
    visibility: hidden;
  }

#catalegDropdown .ac.is-active > .ac-a {
    visibility: visible;
    margin-bottom: 0rem;
  }



#catalegDropdown .ac .title {margin: 0;}
#catalegDropdown .ac .title a {display: block; padding: .25rem 0}
/*
#catalegDropdown #ac-0 h3 {padding: .5rem 1rem .5rem; }
*/
.is-mega .navbar-dropdown {padding-bottom: 0;}


}


/* Banner de text sota barra menu principal i barra Avisos Top ******************************************/ 

#barraBanner,
#barraAvisos  {
  background-color: var(--rosa); 
  /*color: var(--groc-500);*/
  color: white;
  padding: .25em .75rem; 
  font-size: var(--font-small);
  text-align: center;
  overflow-x: hidden;
}

#barraAvisos {background-color: var(--negre); color: var(--gris-ultraclar); padding: 1rem;}


#barraBanner strong, #barraAvisos strong {font-weight: 900; color: inherit;}
#barraBanner a, #barraAvisos a {color: inherit;}

#barraBanner .fiPromo { margin-left: .5em; color: white; opacity: .66; font-style: italic;    }
 
#barraBanner .fiPromo::before {
  font-family: "Material Icons"; /* abans Sharp */
  content: "timer_off"; 
  margin-right: .25em;
  vertical-align: top;
  font-style: normal;
}


/*
#cercadorTop { width: 100% }
#cercadorTop input { width: 100%; border-color: var(--groc-600); border-radius: 1px}
#cercadorTop .control.has-icons-left .icon {top: 1em} */
#menuPrincipal .control.has-icons-left .icon {height: 2.5rem; }

#cercadorTop2 { width: 100%}

#cercadorTop2 input {
  width: 100%; 
  border-color: var(--groc-600); 
  border-radius: 1px;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  padding-left: 1.5rem;
}

#cercadorTop2 .button {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  background-color: var(--groc-900);
  border-color: var(--groc-500);
  border-left: none;
  color: white;
}

#formSearch {margin-bottom: 0;}

.navbar-brand, 
.navbar-tabs,
.navbar, 
.navbar>.container {min-height: 2.25rem}

.navbar-item, .navbar-link {
  line-height: 1.5;
  padding: .25rem .75rem;
}

#iconesMobile.navbar-item {
  width: calc(100% - 197px);
 -webkit-box-pack: end;
 -ms-flex-pack: end;
         justify-content: flex-end;
   }

#iconesMobile .navbar-item:last-child {
  padding-right: 0
}

/*
#iconesMobile i {font-size: 1.33em}
*/

.navbar-burger span {height: 3px}
/*text sota hamburguer*/
.navbar-burger span.titolmenu {font-size: .5rem; background-color: transparent; top: 32px; left: calc(50% - 9.5px)}

/* num articles sobre icona carrito */
i.badge:after{
  content:attr(value);
  font-family: var(--font-standard);
  background: var(--rosa);
  font-size:50%;
  padding:.1em .5em;
  border-radius:999px;
  line-height:.75em;
  color: white;
  text-align:center;
  min-width:2em;
  font-weight: normal;

  position:relative;
  left:-.75em;
  top:-1.33em;
  opacity:0.85;
}

/*
.avisos i { color: var(--negre)}

.avisos i.badge:after{background-color: white; backcolor: var(--rosa); font-weight: bold; border: 1px solid var(--groc-800);}
*/

.container.estret {max-width: 768px; margin: 0 auto; }

#barramenu1 { padding: .5rem 0 .25rem; }

#barramenu1 .navbar-start {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}


#barramenu2 .navbar {z-index: 20}


@media screen and (max-width: 1023px) {

#barramenu1 .navbar-menu {display: inherit; background-color: var(--groc-corporatiu)}
#barramenu1, #barramenu1 .navbar-item {padding: 0;}
#barramenu1 .navbar-item input {border: none; }
#barramenu1 .control.has-icons-left .icon {/*color: var(--groc-A700);*/}
.navbar-brand .navbar-item {padding-left: 0;}
/*
#cercadorTop input {height: 2.5em}
#cercadorTop i {font-size: 1.25rem; }
*/


/*
#cercadorTop2 {padding: 0;}

#cercadorTop2 input { 
  width: 100%; 
  border-radius: 0;
  padding-left: 1rem; 
  font-size: 1.25rem;
}
#cercadorTop2 .button {
  border-radius: 0;
  background-color: white;
  border: none;
  color: var(--gris);
  box-shadow: inset 0 1px 2px rgba(10,10,10,.1);
  font-size: 1.25rem;

}
*/

#cercadorTop2 {padding: 0 .75rem .5rem;}

.hero-body { padding: 0; }

}





/* Menu bancs ****************************************************/

/* menu bancs amb scroll */

#bancsDropdown {
  max-height: 85vh;
  overflow-y: auto;
}

ul.menubancs3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin: 0;
}
ul.menubancs3 li {
  width: calc(100% / 5 - 1%);
  list-style: none;
  margin-right: 1%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


ul.menubancs3 li.destacat a {
  font-weight: bold;
  font-weight: normal;
  color: var(--groc-500);
}

ul.menubancs3 li.destacat a:hover {
  color: var(--negre);
}

ul.menubancs3 li.destacat a::before {
  font-family: "Material Icons"; /* abans Sharp */
  content: "grade"; 
  margin-right: .25em;
  vertical-align: middle;
}

@media screen and (max-width: 1087px) {

  ul.menubancs3 li {
    /*flex: 1 0 calc(21%);*/
    width: 48%;
    list-style: none;
    margin-right: 1%;
  }

}


/* Menú filtres, versió mobile ********************************************* */

.modalMenuEMobile {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 990;
}

.modalMenuEMobile .overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 995;
  background: rgba(0,0,0,0.85);
}

.modalMenuEMobile .modal_content {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  background: #fff;
  padding: 1rem;
  /* box-shadow: 0 1px 5px rgba(0,0,0,0.7); */
  box-shadow: 0px 8px 10px -5px rgba(0,0,0,0.2), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 30px 5px rgba(0,0,0,0.12);

  width: 75vw;
  height: 100%;
  min-width: 288px;
}

.modalMenuEMobile .modal_content .buttons_wrapper {
  padding: 20px;
}

.modalMenuEMobile .close_modal {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  font-size: 18px;
  opacity: 0.5;
  background: none;
  border: none;
  transition: opacity 0.2s ease;
}

.modalMenuEMobile .close_modal:hover {
  opacity: 0.9;
}

#menuFiltres .control {margin: 0 0 2rem}
#menuFiltres input[type="radio"],
#menuFiltres input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  left: -10000px;
}

#menuFiltres input[type="radio"] + .custom-label,
#menuFiltres input[type="checkbox"] + .custom-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
          align-items: center;
  border-bottom: 2px solid var(--gris-ultraclar);
}

#menuFiltres input[type="radio"]:checked + .custom-label,
#menuFiltres input[type="checkbox"]:checked + .custom-label {
/* border-color: var(--groc-500); */ }


#menuFiltres input[type="radio"] + .custom-label:after,
#menuFiltres input[type="checkbox"] + .custom-label:after  {
  font-family: 'Material Icons';
  content: 'check_box_outline_blank';
  font-size: 150%;
  color: var(--gris-clar); 
  width: 1.5rem;
  line-height: 125%;
}

#menuFiltres input[type="radio"]:checked + label,
#menuFiltres input[type="checkbox"]:checked + label { color: var(--negre); /*background-color: var(--groc-A100)*/ }

#menuFiltres input[type="radio"]:checked + .custom-label:after,
#menuFiltres input[type="checkbox"]:checked + .custom-label:after {
  content: 'check_box';
  font-size: 150%;
  color: var(--negre);
}

/* el núm productes en gris */
#menuFiltres .custom-label span span,
aside .filtres li label span span {
  color: var(--gris); 
  font-size: var(--font-xsmall);
}

aside .filtres .button {margin-top: .75rem;}



/* 
#menuFiltres input[type="checkbox"] + .custom-label:after  { content: 'check_box_outline_blank'}
#menuFiltres input[type="checkbox"]:checked + .custom-label:after {content: 'check_box' } 
*/

.sticky-top {
  position: -webkit-sticky;
  position: sticky; 
  top: 0
}

.sticky-bottom {
  position: -webkit-sticky;
  position: sticky; 
  bottom: 0
}

/* menu filtres desktop *************************************************************************************/ 

aside .filtres {
  font-size: var(--font-small);
  position: -webkit-sticky;
  position: sticky;
  top: 7rem; 
}

aside .filtres li {margin-bottom: .25em; padding-bottom: .25em; border-bottom: 1px dotted var(--gris-clar);}
aside .filtres li:last-child {border-bottom: none;}


/* menu categoria */

#menuCat .menu-list li a {padding: 0.25em 0;}

#menuCat .menu-list li a:hover {background: none; color: var(--negre);}

/* llistat filtres actius, previs al contingut */ 

.filtresActius {margin-bottom: 1rem; padding: 0 1.5%;}



/* 4 blocs botiga inici home ************************************ */

#home-seccions-botiga a {
  display: block;
  padding: 0.75rem;
  height: 100%;
  background-color: var(--groc-corporatiu);
  color: var(--negre);
  transition: .2s ease;
}

#home-seccions-botiga a {
  color: var(--negre);
}

#home-seccions-botiga a:hover {
  background-color: var(--negre);
}

#home-seccions-botiga a:hover h3 {
  color: var(--groc-corporatiu);
}

#home-seccions-botiga a:hover p {
  color: var(--gris-ultraclar);
}

#home-seccions-botiga h3 {
  font-size: 2.25rem;
  font-size: 3vw;
  font-weight: 900;
  line-height: 100%;
  letter-spacing: -.05em;
  text-align: center;
  margin-bottom: 0.25rem;
}

#home-seccions-botiga p {
  font-size: var(--font-small);
}

p.home-intro {
  text-align: center;
  margin: 0 12.5%;
}

@media screen and (max-width: 768px) {
  #home-seccions-botiga h3 {
    font-size: 7vw;
  }
  #home-seccions-botiga.columns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  #home-seccions-botiga .column {
    max-width: 50%;
    padding: 0.25rem;
  }
  p.home-intro {
    text-align: left;
    margin: 0;
  }
}



/* formulari subscripcioins home *****************************************/

#form-subscripcio-home { 
  background-color: var(--negre);
  color: var(--gris-ultraclar);
  padding: 1rem;
  height: 100%;
} 

#form-subscripcio-home .title {color: var(--gris-ultraclar); font-weight: 900; margin: 0; } 
#form-subscripcio-home a:hover {color: var(--groc-corporatiu);}
#form-subscripcio-home .field {margin: .5rem 0;}

#form-subscripcio-home input[type="checkbox"].material:hover + label, input[type="radio"].material:hover + label {
  color: white;
}
#form-subscripcio-home input[type="checkbox"].material:checked + label:before {color: var(--groc-900);}

/* footer ************************************************************************/


#pre-footer {
  background: url('/static/img/peu-growing-happiness.svg') bottom 
  no-repeat;
  min-height: 100px;
  margin-top: 4rem;
} 

.footer {
  background: var(--groc-corporatiu) url('/static/img/somriure-peu.svg') bottom no-repeat; 
  padding: 3rem 1.5rem;
}

.footer, .footer a {color: var(--negre)}

.footer .content p, .footer ul {margin: 0; padding: 0;}
.footer ul li  .material-icons {
  font-size: 1.25rem; 
  font-family: 'Material Icons'; /* abans Sharp */ 
  line-height: 1.5rem; 
  vertical-align: middle; }


  .footer li {margin: 0; padding: 0; list-style: none;}
  .footer li.footer-title,
  .footer address {font-style: normal}
  .footer p.footer-title {margin-bottom: 1em}
  .footer hr {background-color: var(--groc-100) ; height: 1px}

  .icona::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    margin-right: 0.25em;
    line-height: 1.5rem;
    vertical-align: middle;
    font-size: 1.25rem
  }


  .email::before   { font-family: 'Material Icons'; /* abans Sharp */ content: "email"; }
  .horari::before  { font-family: 'Material Icons'; /* abans Sharp */ content: "access_time"; }
  .adreca::before  { font-family: 'Material Icons'; /* abans Sharp */ content: "location_city"; }
  .telefon::before { font-family: 'Material Icons'; /* abans Sharp */ content: "phone"; }

  .peu-xarxes img,
  .peu-targes img {
    height: 2rem;
  }

  .peu-targes {text-align: center; }
  .peu-xarxes {text-align: right; }


  @media (max-width: 768px) {
    .peu-xarxes {text-align: center; }

    #pre-footer {
      min-height: 50px;
      margin-top: 1rem;
    } 
  }




  /* Llistat de productes *************************************************** */

/*
#ContenidorProductes {padding-top: 1rem;}
*/
  .productes-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    padding: 30px 0 10px;
  }

  .productes-header h2 {
    margin: 0;
    line-height: 125%;
  }

  .productes, .productes-cat {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-flex: 1;
    -ms-flex: auto;
    flex: auto;
/*padding: 1%;
background-color: #F5F5F5; */
}

.producte-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
/*-webkit-box-flex: 1;
-ms-flex: 1 1 30%;
flex: 1 1 30%;*/
width: calc(100% / 3 - 2%);
background-color: #FFF;
/*-webkit-box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25);
box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25); */
position: relative; /* per poder ubicar la cinta */
border: 0px solid #ddd;
border-radius: 3px;
margin: 1%;
-webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.1);
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.1);
}

.destaquem .producte-card {margin: 0;}

.productes.graella .producte-card,
#productes-recomendator .producte-card,
#bancs.productes.graella .producte-card,
#bancs .producte-card {
  width: calc(100% / 6 - 1%);
  margin: 0.5%;
  font-size: var(--font-small);

}


/* Microsoft Edge Browser 12+ (All) - @supports method */
@supports (-ms-ime-align:auto) {
  .productes.graella .producte-card,
#productes-recomendator .producte-card,
#bancs.productes.graella .producte-card,
#bancs .producte-card {
  width: calc(100% / 6 - 1.01%);
} 
}


#bancs.productes.graella .producte-card,
#bancs .producte-card  { 
  width: calc(100% / 8 - 1%);
}

/*
#cargaResultats .productes.graella .producte-card { 
  width: calc(100% / 5 - 1%);
}
*/
.productes-cat s,
.destaquem s {font-weight: normal; color: var(--gris-fosc);}

.productes-cat .preu,
.destaquem .preu {text-align: right}


/*compte enrere i ofertes flash*/

.rellotge {
  background-color: var(--gris-ultraclar);
  color:  var(--rosa);
  padding:  .25em;
  margin-top:  .5em;
  text-align: center;
  font-family: var(--font-family-monospace);
  border-radius: 3px;
  font-weight: 900;
}

.rellotge:before {
    font-family: 'Material Icons'; /* abans Sharp */
    content: 'timer_off';
    font-size: 100%;
    line-height: 100%;
    vertical-align: middle;
    margin-right: 0.5em;
    color: var(--rosa);
    font-weight: 900
}

.producte-card.flash {background-color:  var(--rosa); color:  white; }
.producte-card.flash .producte-imatge:after {border-bottom-color: var(--rosa); }

.producte-card.flash a, 
.producte-card.flash .producte-info a.mes-info,
.producte-card.flash ul.producte-preu-llista li span.oferta, 
.producte-card.flash ul.producte-preu-llista li span.oferta s {
  color: white;
}
.productes-cat .producte-card.flash .cinta  {background: white; color: var(--oferta);}



@media screen and (max-width: 768px) {

  .productes.graella .producte-card,
  #productes-recomendator .producte-card,
  #bancs.productes.graella .producte-card,
  #bancs .producte-card, 
  #llistatCategories .producte-card {
    width: calc(100% / 3 - 2%);
    margin: 1%;
  }

  .productes.carouselMobile {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar; 
  }  

  .productes.carouselMobile .producte-card {
    min-width: calc(100% / 3.5 - 1%);
    margin: 1%;
  }



}


@media screen and (max-width: 600px) {

  .productes.graella .producte-card,
  #productes-recomendator .producte-card,
  #bancs.productes.graella .producte-card,
  #bancs .producte-card, 
  #llistatCategories .producte-card {
    width: calc(100% / 2 - 3%);
    margin: 1.5%;
  }

  .productes.carouselMobile .producte-card {
    min-width: calc(100% / 2.5 - 1%);
    margin: 1%;
  }



}


/* versió horitzonal categories */ 

.productes-cat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
          flex-direction: row;
  padding: .5rem;
  background-color: var(--gris-ultraclar);
}


.productes-cat .producte-card,
.destaquem .producte-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
          flex-direction: row;
  width: calc(100% / 2 - 2%);
}

.destaquem .producte-card { width: 100% }


@media screen and (max-width: 768px) {

  .productes-cat {
    padding: 0;
    background-color: transparent;
  }
  .productes-cat .producte-card {
    width:100%;
  }

}

/* destacat a portada  en carousel versió mobile i fix en desktop */

.destaquem {padding: .5rem 1rem;} 
.destaquem .title {font-weight: 900; margin: 0 0 .75rem}

@media screen and (max-width: 768px) {
  #form-subscripcio-home,
  .destaquem {padding: .5rem;}  
}

/*
.carousel {
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar; 
}

.carousel .producte-card {

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;

flex: 0 0 auto; 
width: calc(100% / 1.15);
}

.carousel .producte-imatge {max-width: 33%}
.carousel .producte-imatge:after {content: none}
.carousel .producte-info {font-size: var(--font-small); padding: 1rem;}
.carousel .oferta s {color: var(--gris) ; font-weight: normal}

.carousel .producte-card p {display: none; }




@media screen and (min-width: 769px) {

.carousel {
   display: flex;
   flex-wrap: nowrap;
   overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar; 
}

.carousel .producte-card {
width: calc(100%);
}

}

*/


/* caixa de producte en col dreta */
#coldreta .producte-card {
  width: auto;
}

#productes-ofertes {
  padding: 1%;
/*  background: #FFEA00;
background: -webkit-linear-gradient(45deg, #FBC02D, #FFF176);
background: -o-linear-gradient(45deg, #FBC02D, #FFF176);
background: linear-gradient(45deg, #FBC02D, #FFF176);
background: #DE0021;
background: #212121;
background: #757575;
background: #FFDE03;
*/
border-radius: 3px;
}


/* els dos primers de les ofertes a dues columnes 
#productes-ofertes .producte-card:first-child, 
#productes-ofertes .producte-card:nth-child(2) { 
-webkit-box-flex: 2; 
-ms-flex: 2 46%; 
flex: 2 46%;
}
*/

#llistatCategories .producte-card {
  /* 4columnes */
/* -webkit-box-flex: 1;
-ms-flex: 1 1 23%;
flex: 1 1 23%; */
width: calc(100% / 8 - 2%);
font-size: var(--font-small) 
}


span.no-traduccio {display: block; font-size: var(--font-small); background-color: var(--gris-ultraclar); padding: 0.5em; border: 1px solid var(--gris-clar); margin: .5em 0; border-radius: 3px}
span.no-traduccio img {float: left; max-width: 18px; margin: 0.33em 0.33em 0 0 }



/* llistat subcategories a cat.php */

 .section.subcategories { background-color: var(--gris-ultraclar); margin-bottom: 1rem; padding: 1rem; border-radius: 3px }

 .section.subcategories .subtitle {font-weight: bold; color: var(--negre); margin-bottom: 0   ;}

#llistatCategories .producte-card {
width: calc(100% / 4 - 1%);
/*border: 1px solid var(--gris-clar);*/
flex-direction: row;
}

#llistatCategories .producte-imatge {width: 80px; min-width: 80px; margin-bottom: 0;} 
#llistatCategories .producte-imatge:after {display: none}
#llistatCategories figure {border: 0px solid var(--gris-fosc)}
#llistatCategories .producte-info {padding: .5rem 1rem 1rem .5rem }
#llistatCategories .producte-info h4 {margin: 0}
#llistatCategories .producte-info h4 a {color: var(--gris-fosc); font-size: var(--font-normal); line-height: 1.33em ; font-weight: bold }
#llistatCategories .producte-info h4 a:hover {} 


@media screen and (max-width: 768px) {
 #home #bancs .producte-card,
 #bancs .producte-card {
    width: calc(100% / 3 - 2%);
    margin: 1%;
}

#llistatCategories .producte-card {
width: calc(100% / 2 - 2%);
margin: 1%;
}

}

@media screen and (max-width: 600px) {
 #home #bancs .producte-card,
 #bancs .producte-card {
    width: calc(100% / 2 - 3%);
    margin: 1.5%;
}
#llistatCategories .producte-card {
    width: 100%;
    margin: 1% 0;
}

}


.producte-card img {
  width: 100%;
}


#tabDescripcio, #fitxaCategoria .content, .textColumnes {
    -webkit-columns: 2 360px;
     -moz-columns: 2 360px;
          columns: 2 360px;
}


#tabDescripcio p, #fitxaCategoria .content p,
#tabDescripcio h3, #fitxaCategoria .content h3 { orphans: 2; widows: 2; }

#fitxaCategoria .bannercat img {margin-bottom: 1rem;}


/* retallem la imatge per fer-la quadrada */

.productes figure {
  width: 100%;
  height: 0;
  min-height: 1px;
  padding-bottom: 100%;
  position: relative;
}

.productes figure img {
  bottom: 0;
  height: 100%;
  left: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

#bancs.productes figure img {
  object-fit: scale-down;
} 


/* triangle sobre la imatge en miniatura */
.producte-imatge {margin-bottom: -1rem; }

.producte-imatge:after {
  content:  "";
  width: 0; 
  height: -1rem; 
  border-top: .5rem solid transparent;
  border-left: .5rem solid transparent;
  border-right: .5rem solid transparent;
  border-bottom: .5rem solid white;
  position: relative;
  top: -1.65rem;
  left: .65rem;
  border-style: inset;
}

.destaquem .producte-imatge:after {content: none;}
.destaquem .producte-imatge {margin-bottom: 0; }

.producte-info {
  /*margin-top: auto;*/
  padding: 2.5% 7.5% 7.5%;
  text-align: left;

  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
  -ms-flex-direction: column; 
          flex-direction: column; 
  -webkit-box-pack: justify; 
  -ms-flex-pack: justify; 
          justify-content: space-between; 
  height: 100%
}


.producte-info h3,
.producte-info h4,
.producte-info h5 {
  line-height: 1.25em;
  font-weight: bold;
}

.producte-info p {
  line-height: 1.25em;
  padding: .1em 0;
}

.producte-card p {
  margin: 0;
  padding: 0;
}

.productes-cat .producte-info p {
  line-height: 130%;
}

.producte-info p.categoria {
  text-transform: uppercase;
  margin: .5em 0 0;
}

.producte-info a {
  color: var(--negre);
}

.producte-info a.mes-info  {color: var(--groc-900); }

.producte-info a.mes-info:after {
  font-family: 'Material Icons'; /* abans Sharp */
  content: 'chevron_right';
  vertical-align: bottom;
}

.producte-info p.preu {
  font-weight: bold;
  font-weight: bold;
  padding-top: .5em;
}

.producte-info h3,
.producte-info h4,
.producte-info h5,
.producte-info p.oferta {
}

.producte-info p.avis .fa,
.producte-info p.oferta,
ul.producte-preu-llista li span.oferta {
  color: var(--oferta);
}

ul.producte-preu-llista {
  text-align: left;
  list-style: none;
  padding-left: 0;
  /*margin-top: 10px;*/
  padding-top: .5em;
}

ul.producte-preu-llista li.esgotat {color: var(--gris-inactiu);}
ul.producte-preu-llista li.esgotat::before {border-color: var(--gris-inactiu);}

@media screen and (max-width: 768px) {

ul.producte-preu-llista {
font-size: var(--font-small); 
}

}

.producte-footer { 
  border-top: 1px solid var(--gris-clar);
  margin-top: .5em; padding-top: .5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
          align-items: center; 
}

.producte-footer a {color: var(--gris);}

.producte-footer a:first-child {color: var(--groc-900);}
#areaUsuari .producte-footer i {margin: 0}




/* llistat en horitzontal de categories i destacat portada */

.productes-cat .producte-card .producte-imatge,
.destaquem .producte-card .producte-imatge {
  width: 30%; 
  padding: 1%; 
}
.productes-cat .producte-card .producte-info,
.destaquem .producte-card .producte-info {
  width: 70%; 
  padding: 2.5% 5% 5% 2%;
  height: auto;
}



/* llistat de preus amb linia de punts: https://codepen.io/sarahmonster/pen/qOrQEv */

ul.producte-preu-llista li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  line-height: 100%;
}

ul.producte-preu-llista li::before {
  border-bottom: 1px dotted #999;
  content: "";
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 1em;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
  margin: 0 3px;
}

ul.producte-preu-llista li span:first-child {
  font-weight: bold;
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 3;
  order: 3;
  padding-top: 0.25em;
  margin-left: auto;
}


/*
.producte-info ul.producte-preu-llista li span:nth-child(2){ 
color: #de0021;
width: 100%;
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
} 
*/


/* preu tatxat */

ul.producte-preu-llista li del {
  width: 100%;
  text-align: right;
  color: #666;
  -webkit-box-ordinal-group: 5;
  -ms-flex-order: 4;
  order: 4;
}


/* cinta ofertes diagonal */

.contenidor-cinta {
  width: 110px;
  height: 110px;
  overflow: hidden;
  position: absolute;
  top: 0px;
  right: 0px;
}

.cinta {
  background-color: var(--oferta);
  color: #fff;
  font-weight: 900;
  text-align: center;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  position: relative;
  padding: 4px 0;
  top: 12px;
  right: -30px;
  width: 110px;
  z-index: 10;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
  box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}

.cinta.novetat {
  background-color: #8BC34A;
}

.cinta.petit {
  font-size: 100%;
  padding: .25rem 0;
}

.cinta span { font-size: var(--font-xsmall); font-weight: normal }

.producte-card .avis {
  font-size: var(--font-xsmall);
}

/* pàg resultats cerca  *********************************************************/


.pagResultatsCerca section {background-color: var(--gris-ultraclar); padding: .5rem;}

.pagResultatsCerca  > .container > h2.subtitle {margin-bottom: .5em; text-transform: uppercase; font-size: 1rem; color: var(--gris);
}

.pagResultatsCerca > .container > h2.subtitle:before {
    font-family: 'Material Icons'; /* abans Sharp */
    content: 'search';
    font-size: 125%;
    line-height: 100%;
    vertical-align: middle;
    margin-right: 0.1em;
    text-transform: none
  }

.pagResultatsCerca #llistatCategories .producte-info h4 a {font-weight: bold; font-size: var(--font-small);}

#resultatsBlog .subtitle {font-size: var(--font-normal) }

/*paginació *************************/

ul.pagination2 {
  margin-top: 40px;
  padding-left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.pagination2 li {
  display: inline-block;
  border-radius: 2px;
  text-align: center;
  vertical-align: top;
  height: 30px;
}

.pagination2 li a,
.pagination2 li span {
  color: #444;
  display: inline-block;
  font-size: var(--font-small);
  padding: 0 10px;
  line-height: 30px;
  border: none;
}

.pagination2 li.active {
  background-color: var(--groc-corporatiu);
}

.pagination2 li.active a {
  color: var(--negre);
}

.pagination2 li.disabled a,
.pagination2 li.disabled span {
  cursor: default;
  color: #999;
}

.pagination2 .material-icons {vertical-align: middle}


@media ( max-width: 768px) {

  .producte-card {

width: calc(100% / 3 - 2%);
}


}

@media ( max-width: 600px) {

  .producte-card {

width: calc(100% / 2 - 2%);
}

}


@media ( max-width: 480px) {

  .productes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: auto;
  }

  .producte-card {
/*-webkit-box-flex: 1;
-ms-flex: 1 46%;
flex: 1 46%;*/
width: calc(100% /2 - 2%);
}

.productes-cat .producte-card {
   -webkit-box-flex: column;
       -ms-flex: column;
           flex: column;
 }


.producte-info {
  padding: 10px;
}

.producte-info h4 {
  margin: 0;
}

.productes-header {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.productes-header a {
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.producte-info ul.producte-preu-llista {
  margin: 0;
}
}

/* fem quadrades les miniatures dels llistats de categories */

.miniatures-quadrades .thumbnail a {
  display: block;
  width: 100%;
  height: 0;
  min-height: 1px;
  padding-bottom: 100%;
  position: relative;
  border-left: 10px solid white;
  border-right: 10px solid white;
}

.miniatures-quadrades .thumbnail a:first-child img {
  object-fit: contain;
  bottom: 0;
  height: 100%;
  left: 0;
  object-position: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  display: block;
}

.miniatures-quadrades .thumbnail .caption a {
  clear: both;
  display: inline-block;
  padding: 0;
  margin: 0;
}

.miniatures-quadrades .thumbnail .caption {
  padding-left: 0;
  padding-right: 0;
  padding-top: 5px;
}



/* fitxa producte pàgina de detall *******************************************/ 

/* heading */
.producteHeading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
 font-size: var(--font-large);
}

.producteHeading .title { margin: 0; line-height: 1em;}

.producteHeading .botoWishlist .material-icons { 
  line-height: 1; 
  font-size: 2rem;
}

@media screen and (min-width: 769px) {
      .producteHeading .botoWishlist .material-icons {
      margin-right: 1rem;
    }
}


  .producteHeading  .ratings_stars {font-size: 100%}
  /* llistat de preus pàgina detall */   
  #llistaPreusProducte {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
        -ms-flex-direction: column; 
            flex-direction: column;
    margin-bottom: .5rem;
  }  

  #llistaPreusProducte .contenidorFill {width: 100%; }

  #llistaPreusProducte .notes {font-size: var(--font-xsmall); color: inherit;}

  #llistaPreusProducte .preu {font-weight: bold; text-align: right;}

  #llistaPreusProducte input[type="radio"] {
    opacity: 0;
    position: absolute;
    left: -10000px;
  }

  #llistaPreusProducte input[type="radio"] + .radio-custom-label,
  #llistaPreusProducte .simularadio {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border: 2px solid var(--gris-ultraclar);
    padding: 0.5rem 1rem;
    margin-bottom: .5rem;
    border-radius: 4px;
    cursor: pointer;
    color: var(--gris);
  }

#llistaPreusProducte input[type="radio"] + .radio-custom-label:last-child {margin-bottom: 0}

#llistaPreusProducte input[type="radio"] + .radio-custom-label:after {
    font-family: 'Material Icons';
    content: 'check';
    font-size: 150%;
    color: var(--gris-ultraclar);
    line-height: 100%; 
    margin-left: 0.25em;
    font-weight: bold
  }
  #llistaPreusProducte input[type="radio"]:checked + .radio-custom-label:after {
    color: var(--groc-900);
    color: black;
  }

  #llistaPreusProducte input[type="radio"]:checked + .radio-custom-label {
    border-color: var(--groc-700);
    border-style: solid;
    color: #000000; 
    /*background-color: var(--groc-200); */
    background-color: white

  }


  /* preu amb línia de punts */
  #llistaPreusProducte .fill {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
    -webkit-box-pack: justify; 
        -ms-flex-pack: justify; 
            justify-content: space-between;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    line-height: 1;
    width: 100%;
  }

  #llistaPreusProducte .fill::before {
    border-bottom: 1px dotted #999;
    content: "";
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: 1em;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    margin: 0 .5em .15em;
  }

  #llistaPreusProducte .fill .preu  {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    padding-top: 0.25em;
    margin-left: auto; 
  }

  #llistaPreusProducte .avisos {font-size: var(--font-xsmall); margin-top: .25em;}

  #llistaPreusProducte s {font-weight: normal}


  .avis:before {
    font-family: "Material Icons"; /* abans Sharp */
    content: "error_outline";
    vertical-align: middle;
    margin-right: .25em;
    /*color: var(--alerta); */
    font-weight: normal;   
  }

  .avis.info:before,
  .avis.alerta:before {
    content: "info";
    color: var(--groc-900);
  }

  #llistaPreusProducte .descompte {
    color: var(--alerta); 
    padding: 0 .25em; 
/*   margin: 0 .25em;
  color: white; 
  border-radius: 4px; 
  vertical-align: baseline;*/
  font-weight: normal
} 

#llistaPreusProducte  input[type="radio"][disabled] + label,
#llistaPreusProducte .simularadio {
  color: var(--gris); 
  cursor: default;
}

#llistaPreusProducte  input[type="radio"][disabled] + label .avis,
#llistaPreusProducte  input[type="radio"][disabled] + label .avis:before,
#llistaPreusProducte .simularadio .avis {
  color: var(--gris);
}

#llistaPreusProducte  input[type="radio"][disabled] + label .preu,
#llistaPreusProducte .simularadio .preu {
  color: var(--gris-clar);
}


#llistaPreusProducte input[type="radio"][disabled] + .radio-custom-label:after {
  content: "add_alert";
  color: var(--groc-900);
  cursor: pointer;
}

#llistaPreusProducte input[type="radio"][disabled] + label .fill::before,
#llistaPreusProducte .simularadio .fill::before {
  border-color: var(--gris-clar);
}


#llistaPreusProducte .simularadio .material-icons {
  font-size: 200%;
  color: var(--groc-900);
  margin-left: .5rem;
}


.botoComprarPeu {margin-bottom: 1rem;}
.botoComprarPeu a.button:not(:last-child) {margin-bottom: 0.5em;}

@media screen and (max-width: 768px) {

  #llistaPreusProducte .fill {
    display: inline;
  }
  #llistaPreusProducte .fill::before {display: none}
  #llistaPreusProducte .preu {text-align: left;}

  .botoComprarPeu {
    position: -webkit-sticky;
    position: sticky; 
    bottom: 0; 
    z-index: 20;
    margin-bottom: 0;
    padding-bottom:0;
    padding-top: 0;
  }


.column.botoComprarPeu { 
  background-color: white; 
  padding-top: 0; 
  display: flex; 
  justify-content: space-between;

}
.botoComprarPeu a:first-child {margin-right: 0.25em;}

.botoComprarPeu a:last-child {margin-left: 0.25em;}

}

@media screen and (max-width: 1023px) {

.boto-filtres-fixat {
    background-color: white;
    position: -webkit-sticky;
    position: sticky; 
    top: 6rem;
    z-index: 20;
    padding: .75rem 0 0;
    margin: -1rem 0 1rem;
 }

}


/* estrelles valoració producte */

  .rate_widget {display: flex; padding-top: .25rem;}
  .rate_widget div{margin-right: .2em;}
  .rate_widget .insertaaqui{margin-left: .2em; padding-top: .2em;}

.estrelles {
  color: #ffc107;
  margin: 0.25rem 0 .5rem;
  font-size: 90%;
  padding: 0;
}

.ratings_stars {
  display: inline-block;
  font-family: 'Material Icons';
  font-size: 150%;
  cursor: pointer;
  line-height: 1;
  letter-spacing: -.25em;
}

.ratings_stars:before {
  content: "star_border"
}

.ratings_vote:before {
  content: "star"
}

.ratings_over:before {
  content: "star";
  color: var(--groc-900)
}

.total_votes {
  font-size: 11px;
  color: var(--gris)
}

.alerta-valoracio {
  cursor: auto;
  color: var(--gris);
}


ul.llistaPropietats {
  list-style: none;
  padding: 0;
}
ul.llistaPropietats li {
  padding-left: 1.3em;
}
ul.llistaPropietats li:before {
  content: "check_circle"; 
  font-family: 'Material Icons';
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
  color: var(--groc-700);
  vertical-align: middle;

}

#fitxaProducte {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  display: -webkit-flex; /* Safari */   
  -webkit-box-align: start;   
      -ms-flex-align: start;   
          align-items: flex-start; 

}

#fitxaProducte .galeria, #fitxaProducte .producteInfo {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
}
#fitxaProducte .producteInfo {
  -webkit-box-flex: 4;
      -ms-flex: 4;
          flex: 4;
}

#fitxaProducte .producteInfo h1 { 
  font-size: var(--font-large); 
  line-height: 1.25em;
  padding-bottom: .25em;
  font-weight: 600
} 

#fitxaProducte .producteInfo {padding-left: 2rem;}

#fitxaProducte .galeria {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

#fitxaProducte .galeria figure {
  background-color: #FFF;
  position: relative;
  border: 0px solid #ddd;
  border-radius: 3px;
  margin: 1%;
}

#fitxaProducte .galeria figure:first-child{ 
  -webkit-box-flex: 1; 
      -ms-flex: 1 100%; 
          flex: 1 100%; 
}

#fitxaProducte .galeria figure img { 
  width: 100%; 
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.1);
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.1);
}


/* fem miniatures quadrades */ 
#fitxaProducte .galeria figure:not(:first-child) {
  width: calc(100% / 4 - 2%);
  height: 0;
  min-height: 1px;
  padding-bottom: 24%;
  position: relative;
}

#fitxaProducte .galeria figure:not(:first-child) img { 
  bottom: 0;
  height: 100%;
  left: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

#fitxaProducte .galeria figure:not(:first-child) figcaption {display: none}


#fitxaProducte .galeria figcaption {color: var(--gris); font-size: var(--font-small); font-style: oblique; padding-top: 0.25em; }

#fitxaProducte .galeriaMobile {display: none;}

#fitxaProducte .material-icons {line-height: 1; }

#fitxaProducte .notification {margin-bottom: 1em;}

@media all and (max-width: 768px) {

  #fitxaProducte { display: block; }
  #fitxaProducte .producteInfo {padding-left: 0;}
  /*#fitxaProducte .galeria {display: none}
  #fitxaProducte .galeriaMobile { display: inherit; margin-bottom: 30px }*/
  #fitxaProducte .galeria figure:not(:first-child) {display: none}
  #fitxaProducte .galeria figure figcaption {display: none}
  #fitxaProducte .galeria figure img  {box-shadow: none}

}


/* icona de lupa x ampliar imatge */
.miniaturaProducte { 
  position: relative;
  text-align: center;
  color: white
}

.ObrirPhotoSwipe:before { 
 font-family: "Material Icons"; /* abans Sharp */
 content: 'zoom_in';
 font-size: 500%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 color: white;
 opacity: .8;

}

/*icona play sobre imatge card de videos 
#videos .card-image { 
  position: relative;
  text-align: center;
  color: white
}
*/

#videos .card-image a:before { 
 font-family: "Material Icons"; /* abans Sharp */
 content: 'play_circle_filled';
 font-size: 500%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 color: white;
 opacity: .8;
text-shadow: 3px 3px 3px rgba(150, 150, 150, .5);
}



/* estils dels llistats dins la descripció de producte en la pàgina de detall, interior modals...  */

.textFormat h3, .textFormat h2, .content h2, .content h3 {
font-size: var(--font-medium); font-weight: normal; color: var(--negre); line-height: 1.2em; 
}

.textFormat p {
  margin-bottom: 1em;
}

.textFormat ul,
.textbbdd ul
 {
  margin: 0.5em 0 .75em;
  list-style: disc;
  padding-left: 1.75em;
}

.textFormat ol,
.textbbdd ol
 {
  margin: 0.5em 0 .75em;
  padding-left: 1.75em;
}


.textFormat ul ::marker {color: var(--groc-corporatiu);}

/* secció tags */

.tags a.label:before {
  font-family: "Material Icons"; /* abans Sharp */
  content: 'check';
  line-height: 1;
  margin-right: 0.25em;
  vertical-align: middle;
  color: var(--groc-900);
}

/* tags categoria */
#etiquetesCat {
  padding: .5rem 1rem 1rem;
  background-color: var(--gris-ultraclar);
}

#etiquetesCat a.tag.is-dark:hover {text-decoration: none; background-color: #000000; ;
}

#etiquetesCat h3 {
font-size: var(--font-normal); }


@media all and (max-width: 768px) {

#etiquetesCat {
  padding: 0;
  background: none;
 }
}



a.link-zona-enviament  {
  display: block; 
  margin: .5rem 0 .75rem;
  font-size: var(--font-small);
  text-align: center;
}

a.link-zona-enviament:before {

  font-family: "Material Icons";
  content: "public";
  margin-right: .25em;
  vertical-align: middle;
  font-size: 1.25em
}


.columnes-text {  
  -webkit-columns: 3 150px;
  -moz-columns: 3 150px;
  columns: 3 150px;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
}



/* Taula preus pàgina detall ********************************* 

#taulapreus {margin-bottom: 1.5rem;}
#taulapreus .boto,
#taulapreus .detallpreu {text-align: right}
#taulapreus .fill {padding: .5em .25rem; border-top: 1px solid var(--gris-clar);} 
#taulapreus .fill,
#taulapreus .descripcio {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end;
} 
#taulapreus .descripcio {width: 65%}
#taulapreus .boto {width: 33%}

#taulapreus .producte .avis {display: block; font-size: var(--font-small); }

#taulapreus .fill:nth-child(even) {background-color: var(--gris-ultraclar)}
#taulapreus .preu {font-weight: bold; font-size: var(--font-normal)}

#taulapreus .descompte {background-color: var(--oferta); font-weight: bold; color: white; border-radius: 3px; padding: 0 .25em; margin: 0 .25em;}

.desactivat {color: var(--gris)}


@media all and (max-width: 768px) {


  #taulapreus .descripcio {
    flex-direction: column;
    align-items: flex-start;
  }
  #taulapreus .detallpreu {text-align: left}

  #taulapreus .descripcio {width: 50%; text-align: left}
  #taulapreus .boto {width: 48%}
}

*/

/* comentaris producte ************************************************ */

#reviews2 article {
  font-family: var(--font-standard);
  font-size: var(--font-normal);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  padding: 0 1rem 1rem 0;

}

#reviews2 article:not(:first-child) {  
  border-top: 1px solid var(--gris-clar);
  padding: 1rem 1rem 1rem 0;
}

#reviews2 .icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

#reviews2 h3::after {
  font-family: "Material Icons"; /* abans Sharp */
  font-weight: 400;
  font-size: 3rem;
  content: "comment";
  color: var(--gris-clar);
}

#reviews2 h3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  font-size: var(--font-medium);
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 1rem;
}

#reviews2 article::before {
  font-family: "Material Icons"; /* abans Sharp */
  content: "account_circle";
  font-size: 300%;
  color: var(--gris-clar);
  padding-right: 2%;
  margin-top: -10px;
}

#reviews2 article.staff::before {
  content:url('https://media.alchimiaweb.com/avatar-comentaris.svg');
  width: 60px;
  height: 60px;
}

#reviews2 article.client::before {
  color: var(--groc-500);
}

#reviews2 article.comprador::before {
  color: var(--groc-800);
}

#reviews2 article.staff {
  border-top: none;
  margin-bottom: 1rem;
  margin-left: 1rem;
  padding-left: 1rem;
  background-color: var(--groc-A100);
  color: var(--negre);
}

#reviews2 article a {color: var(--negre); text-decoration: underline;} 

.comentari {
  width: 100%;
}

.comentariHeader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  width: 100%;
}

.comentariHeader div:first-child {
  font-weight: bold;
  display: flex;
  width: 100%;
}

.comentariHeader div:last-child {
  font-size: smaller;
  color: var(--gris);
  text-align: right;
  white-space: nowrap;
}

#reviews2 article.client .status {
  color: var(--gris);
  font-weight: normal;
  font-style: italic;
}

#reviews2 article.comprador .status {
  color: var(--groc-900);
  font-weight: normal;
  font-style: italic;
}

#reviews2 article.client .status,
#reviews2 article.comprador .status {
  padding-left: .5em;
  margin: 0 .5em;
  border-left: 1px solid var(--gris-clar);
}

#reviews2 article .data {
  white-space: nowrap;
}

@media all and (max-width: 600px) {
  #reviews2 article {
    padding: 1rem 0
  }

  .comentariHeader, .comentariHeader div:first-child {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start
  }

  #reviews2 article.client .status,
  #reviews2 article.comprador .status {
    padding-left: 0;
    margin-left: 0;
    border-left: none;
  }

  #reviews2 article.staff {
    margin-left: 5%;
    padding-left: 2%;
    padding-right: 2%;
  }

  #reviews2 article.staff::before {
    width: 55px;
    height: 55px;
  }
  .comentari {
    width: 100%;
  }
  .comentariHeader div:last-child {
    text-align: left
  }
  #reviews2 h3::after {
    font-size: 300%;
  }
}



/* bloc 4 avantatges de comprar a Alchimia  ************************* */


.blocAvantatges2 {
  font-family:var(--font-standard);
  font-size: var(--font-small);
  margin:1rem 0 2rem;
}


.blocAvantatges2 ul {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  margin:0;
  padding:1% 2%;
  list-style:none;
  vertical-align:middle;
  border:2px solid var(--gris-clar);
  border-radius:.25em;
  -webkit-box-pack:justify;
      -ms-flex-pack:justify;
          justify-content:space-between;
}

.blocAvantatges2 ul li {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:nowrap;
      flex-wrap:nowrap;
  width:calc(100% / 4);
  -webkit-box-pack:center;
      -ms-flex-pack:center;
          justify-content:center;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
      -ms-flex-direction:row;
          flex-direction:row;
  text-align:left;
  padding:5px 10px;
  margin:0;
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  justify-content:center;
  line-height:125%;
  border-right:2px solid var(--gris-clar);
}

.blocAvantatges2 ul li:last-child {
  border:none;
}

#continguts .blocAvantatges2 ul li {margin-left: 0}

.blocAvantatges2 li a {
  color:var(--gris-fosc);
  text-decoration:underline;
}
.blocAvantatges2 strong  {
  color:var(--gris-fosc);
}

.blocAvantatges2 li::before {
  font-family: 'Material Icons';
  font-size:2.5em;
  line-height:125%;
  /*color:var(--groc-600);*/
  margin-right:10px;

  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.blocAvantatges2 li.regal::before {
  content: "card_giftcard";
}

.blocAvantatges2 li.segur::before {
  content:"security";
}

.blocAvantatges2 li.discret::before {
  content:"visibility_off";
}

.blocAvantatges2 li.transport::before {
  content:"local_shipping";
}

.blocAvantatges2.invers li {
  background-color:var(--gris-fosc);
}

.blocAvantatges2.invers li *,.blocAvantatges2.invers li::before {
  color:var(--gris-ultraclar);
  font-weight:400;
}

.hero-foot .blocAvantatges2 {margin: 0;}
.hero-foot .blocAvantatges2 ul { border: none; }
.hero-foot .blocAvantatges2 li { border-color: white; padding: 0 2%; color: var(--negre);}
.hero-foot .blocAvantatges2 li::before { color:var(--negre); }

.hero.is-primary {background-color: var(--groc-corporatiu)}



@media all and (max-width: 600px) {

  .blocAvantatges2 ul,
  .hero-foot .blocAvantatges2 ul {
    -ms-flex-wrap:wrap;
        flex-wrap:wrap;
    border-radius:10px;
  }
  #continguts .blocAvantatges2 li,
  .hero-foot .blocAvantatges2 li  {
    width:calc(100% / 2);
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
        -ms-flex-direction:column;
            flex-direction:column;
    text-align:center;
    padding:2%;
    margin:0;
  }

  .blocAvantatges2 li:nth-child(even) {
    border:none;
  }

  .blocAvantatges2 li:first-child,.blocAvantatges2 li:nth-child(2) {
    border-bottom:2px solid var(--gris-clar);
  }

  .blocAvantatges2 li::before {
    margin:0;
  }

  .hero-foot .blocAvantatges2 li:first-child,
  .hero-foot .blocAvantatges2 li:nth-child(2) {
    border-bottom:2px solid white;
  }
  .hero-foot .blocAvantatges2 li { padding: 2%;}


}




/* botó llegir més descripció 
https://codepen.io/Idered/pen/AeBgF/ */

.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .3s ease;
 }

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before { content: '\2193 \00a0 Read more... ';}

.read-more-state:checked ~ .read-more-trigger:before {content: '\2191 \00a0 Show less'; }

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  color: #666;
  }

/* no mostrem el show less */
.read-more-state:checked ~ .read-more-trigger {display: none} 

form#formFitxaProducte {
  background-color: var(--gris-ultraclar); 
  padding: 2em; 
  margin-left: 1em;
  border: 1px solid var(--gris-clar);
  border-radius: 5px;
}  
form#formFitxaProducte, 
form#formFitxaProducte input, 
form#formFitxaProducte textarea, 
form#formFitxaProducte label, 
form#formFitxaProducte h2,
form#formFitxaProducte p {
  font-family: var(--font-standard);
}

form#formFitxaProducte label  {color: var(--gris-fosc); text-align: left; margin: 1rem .5rem 0 0; }
form#formFitxaProducte .help { font-size: small; margin-left: .5rem; }
form#formFitxaProducte button.button {padding: 1% 15%; }
form#formFitxaProducte h2 {
  font-size: var(--font-normal); 
  font-weight: normal; 
  text-transform: none; 
  margin-bottom: 1rem; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

form#formFitxaProducte #acceptacio { margin-bottom: 1rem;}


form#formFitxaProducte .notification,
#formRevPost .notification {background-color: transparent; font-size: var(--font-small); border: 1px solid var(--alerta) }

#formRevPost {margin-top: 2rem;}

@media all and (max-width: 600px) {

  /*  form#formFitxaProducte h2::after { font-size: 250% } */
  form#formFitxaProducte {padding: 1.5em; margin-left: 0}  

}


/* CART ******************************************************************* */

#cart {
  font-size: var(--font-normal);
  line-height: 1.25em;
}

#cart h3 {
  font-size: var(--font-medium); 
  font-weight: normal;
  margin-bottom: .75em;
  color: var(--negre);
}

#cart h3 span {
  background-color: var(--gris); 
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: white;
  font-weight: bold;
  display: inline-block;
  line-height: 1.6em;
  margin-right: 5px;
  text-align: center;
  width: 1.6em; 
}

#cart  hr {
  border-color: var(--gris);
  margin: 1.5rem 0;
}

.cartResum {
  position:-webkit-sticky; 
  position:sticky; 
  top:7.5rem;
}


.cartProductes article {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-bottom: 1px solid var(--gris-clar);
  padding: 1rem 0.5rem;
}

.cartProductes article:nth-child(even) {background-color: var(--gris-ultraclar)}
.cartProductes article:last-child {border-bottom: none;}

.cartProductes article div {margin-left: 1rem}
.cartProductes article div:first-child,
.cartProductes article div.cartDescripcio div{margin-left: 0}

.cartProductes .cartImatge {
  width: 80px;
}


.validar .button:before {
    font-family: "Material Icons"; /* abans Sharp */
    content: "check_circle";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    text-decoration: inherit;
    font-size: 1.25em;
    vertical-align: middle;
    margin-right: .25em;
}

.validar input {box-shadow: none; border: 2px solid var(--groc-500);}
.validar input:hover {border-color: var(--groc-600);}




/* imatge quadrada */
#cart figure {
  width: 100%;
  height: 0;
  min-height: 1px;
  padding-bottom: 100%;
  position: relative;
}

#cart figure img {
  bottom: 0;
  height: 100%;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

.cartInfoProducte {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;  
  -webkit-box-pack: justify;  
      -ms-flex-pack: justify;  
          justify-content: space-between;
  width: 100%;
}

.cartDescripcio {
  width: calc(70% - 2rem);
}
.cartQuantitat,
.cartCost {
  width: 15%;
  text-align: right;
}
  .cartQuantitat .button i {margin: 0;}
  .cartQuantitat .button.is-small,
  .cartQuantitat input.is-small {border: 1px solid var(--gris); width: 3em; border-radius: 0; text-align: center;}
  .cartQuantitat .button:first-child.is-small {border-radius: 3px 0 0 3px; border-right: none;}
  .cartQuantitat .button.is-small:last-child {border-radius: 0 3px 3px 0; border-left: none;}
  .cartQuantitat .has-addons {justify-content: flex-start;}

  /* Webkit browsers like Safari and Chrome */
  input.remove-spin[type=number]::-webkit-inner-spin-button,
  input.remove-spin[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  /* For Firefox */
  input.remove-spin[type='number'] {
    -moz-appearance:textfield;
  }
  

.cartEliminar a {color: var(--gris);}
.cartEliminar a:hover {color: var(--negre);}


.cartProductes span.avis {
  font-size: var(--font-small);
  color: var(--alerta);
}

.cartProductes span.avis::before {
  font-family: "Material Icons"; /* abans Sharp */
  content: "error";
  padding-right: .25em;
  vertical-align: middle;
}

.cartResum,
.opcionsCompraResum {
  padding: 1em;
  border: 10px solid var(--gris-ultraclar);
  margin-bottom: .5em;
}

.cartResum h3 {margin-top: 0;}
.cartResum dl {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin: 0;
}
.cartResum dt,
.cartResum dd {
  box-sizing: border-box;
  margin: 0;
  padding: .75em .25em;
  border-bottom: 1px solid var(--gris-clar);
  font-weight: normal;
  line-height: 1.25em;
}

.cartResum dt {width: calc(60%);  }
.cartResum dd {width: calc(40%); text-align: right; font-weight: bold }

.cartResum dt a:first-child{font-weight: bold}

.cartResum dl dt:last-of-type,
.cartResum dl dd:last-child {
  background-color: var(--groc-A100);
}

.cartResum dl dd:last-child {
  font-weight: bold;
}

.cartResum a {color: var(--negre)} 
.cartDescripcio a {color: var(--negre); font-weight: bold }

.catResum .descompte {color: var(--alerta);}

.cartResum ul.notes {
  clear: both;
  padding: 0 0 1em 0.5em;
  margin: 1em 0;
  font-size: var(--font-small);
  list-style: none;
  border-bottom: 1px solid var(--gris-clar);

}
.cartResum ul.notes li {
  padding: 0;
  margin: 0;
}

.cartResum .label {
  color: var(--gris);
  font-weight: normal;
  text-align: left;
  margin-bottom: 0.25em;
}

.cartResum .avis,
.cartResum .descompte { color: var(--alerta); }

.cartResum #showmapIni a {color: var(--groc-900); cursor:pointer;}
.cartResum #showmapIni,
.cartResum #showmapFi {margin-bottom: 1rem}

.cartResum .notification {font-size: var(--font-small)}
.cartResum .notification .button {margin-top: 1em;}


.cartHeader {
  text-align: center; 
  background-color: var(--gris-ultraclar); 
  padding: 1em;
  margin: 0 0 1em 0; 

}

.opcionsCompraResum dl.llistaVertical {
  border: none;
  margin: 0;
  padding: 0 .5em;
}

dl.llistaVertical dt {
  font-weight: bold;
  border-top: 1px solid var(--gris-clar);
  margin-top: .5em;
  padding-top: .5em;
}

dl.llistaVertical dt:first-child {
  border-top: none;
  margin-top: 0;
}


.avisoscart {margin-top: 1.5rem;}

.confirmar i {margin-left: .25em; color: var(--groc-500)}

a.editar { font-size: var(--font-small)
}
a.editar:before {
    content: "edit";
    font-family: "Material Icons";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    vertical-align: top;
    margin-right: .25em;
}

.promos-suggerides ul {
padding-top: .5em;
}

.promos-suggerides ul li {margin-bottom: .25em;}

.promos-suggerides ul li:before {
    content: "radio_button_unchecked";
    font-family: "Material Icons";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    font-size: 1.33em;
    vertical-align: middle;
    margin-right: .25em;
}



.promos-suggerides ul li.tengui:before {
content: 'check_circle';
}

.notification.promos-suggerides a {font-weight: bold}




@media all and (max-width: 768px) {

/*  #cart {padding-bottom: 10rem;} */

  .cartResum {position: static; }

  .cartInfoProducte,
  .cartContenidor {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .cartProductes {
    margin: 0;
  }

  .cartResum, 
  .opcionsCompraResum {
    padding: 0;
    border: none; 
  }
  .opcionsCompraResum dl.llistaVertical {padding: 0;}

  .cartProductes article div.cartInfoProducte div {
    margin-left: 0;
    width: 100%; 
    text-align: left;
  }
  .cartQuantitat {
    width: auto;
    padding: .5em 0;
  }
}

/* steps procés compra  */
.steps {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1.75rem;
}

.steps .steps-segment:not(:last-child) {
    -ms-flex-preferred-size: 1rem;
        flex-basis: 1rem;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -ms-flex-negative: 1;
        flex-shrink: 1;
}

.steps .steps-segment {
    position: relative;
}

.steps .steps-marker {
    background-color: var(--groc-500);
    color: var(--negre);
}

.steps .steps-marker {
    height: 2.5rem;
    width: 2.5rem;
    overflow: hidden;
}

.steps .steps-marker {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-radius: 50%;
    font-weight: 700;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
    z-index: 5;
}

.steps:not(.is-vertical) .steps-segment:not(:last-child):after {
    height: .4em;
    left: 1.76rem;
    right: -.24rem;
    top: calc(1.25rem - (.2em));
}

.steps .steps-segment:not(:last-child):after {
    content: " ";
    display: block;
    position: absolute;
}

.steps .steps-segment.is-active ~ .steps-segment .steps-marker {
    background-color: var(--gris-clar);
    color: rgba(0,0,0,0.5);
}

.steps-segment.is-active ~ .steps-segment:after {
    background-color:  var(--gris-clar);
}
.steps-segment.is-active:after {
    background-color:  var(--gris-clar);
}
.steps-segment:after {
    background-color: var(--groc-500);
}



ul.radios {margin: 0; padding: 0;}
ul.radios li {margin: 0; padding: 0; list-style: none;   color: var(--gris);
}

/* notes que es despleguen al clicar el radio */
.radios label .notes, 
.radios .notes2 {
  position: absolute; 
  opacity: 0; 
  /*transform: scale(.9);*/
  font-size: var(--font-small);
  padding-bottom: .5em; 
  /* afegit x evitar scroll a banda */
  display: none;
}


.radios input[type="radio"]:checked + label .notes {
  display: block;   
  position: static;
  opacity: 1;
  /*transform: scale(1);*/
  transition:  transform .2s ease-in, opacity .3s ease-in ;
} 

.radios label .notes:before {
  font-family: "Material Icons"; /* abans Sharp */
  /*content: "info";*/
  color: var(--groc-900);
  margin-right: .25em;
  vertical-align: text-top;
}


.radios input[type="radio"]:checked ~ .notes2 {
  display: block;   
  position: static;
  opacity: 1;
  background-color:var(--gris-ultraclar); 
  padding: 0 1em .5em 2.25rem;
  /*transform: scale(1);*/
  transition:  transform .2s ease-in, opacity .3s ease-in ;
} 
.radios input[type="radio"]:checked ~ .notes2 ul li {margin-bottom: .5em; }


/* Simplifiquem checkbox amb icona Google Material. Podriem substituir-ho x les anteriors  */

input[type=checkbox].material,
input[type=radio].material {
  border: 0;
  cursor: pointer;
  height: 1px;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 1px;
}

input[type="checkbox"].material + label,
input[type="radio"].material + label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; 
  line-height: 1.25em;
  cursor: pointer;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  -webkit-transition-delay: 0.15s;
       -o-transition-delay: 0.15s;
          transition-delay: 0.15s;
}

input[type="checkbox"].material + label:before,
input[type="radio"].material + label:before {
  font-family: "Material Icons";
  content: "check_box_outline_blank"; 
  margin: 0 .15em 0 0;
  font-size: 1.5em;
  color: var(--gris-clar);
  line-height: 1;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  -webkit-transition-delay: 0.15s;
       -o-transition-delay: 0.15s;
          transition-delay: 0.15s;
}

input[type="radio"].material + label:before {
  content: "radio_button_unchecked"; 
}

input[type="checkbox"].material:hover + label,
input[type="radio"].material:hover + label {
  color: var(--negre);
}
input[type="checkbox"].material:hover + label:before,
input[type="radio"].material:hover + label:before {
  color: var(--groc-900);
}
input[type="checkbox"].material:checked + label:before {
  content:"check_box";
  color: var(--gris-fosc);
}
input[type="radio"].material:checked + label:before {
  content:"radio_button_checked";
  color: var(--gris-fosc);
}


input[type="checkbox"].material:disabled + label:before,
input[type="radio"].material:disabled + label:before,
input[type="checkbox"].material:hover:disabled + label:before,
input[type="radio"].material:hover:disabled + label:before {
  color: var(--gris-ultraclar);  }


input[type="radio"]:disabled.material  + label,
input[type="radio"]:disabled.material:hover + label {
    color: var(--gris-clar);
}

input[type="radio"]:disabled.material + label .avis {font-size: var(--font-small); color: var(--alerta); line-height: 1.2em }
 

/* versió amb imatge de radio o checkbox més gran */
input[type="checkbox"].material.gran + label:before,
input[type="radio"].material.gran + label:before {font-size: 200%; margin-top: -.2em;}

input[type="checkbox"].material.gran + label,
input[type="radio"].material.gran + label {padding: .5em 0em .25em; }

input[type="checkbox"].material.gran:checked + label,
input[type="radio"].material.gran:checked + label {background-color: var(--gris-ultraclar); color: var(--negre); padding-right: 1em}




/* versió horitzontal per als regals */


ul.llistaRegals {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
    margin: 1em 0;
  padding: 0;
    line-height: 120%;
  font-size: var(--font-small)

}
ul.llistaRegals li {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; 
  margin: 0;
  width: calc(100% / 4.5 - .5%);
  list-style: none;
  padding: 0; 
  margin: 0.25em;
}

ul.llistaRegals input[type="radio"] {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

ul.llistaRegals li label {
  display: block; 
  height: 100%; 
  border: 2px solid var(--gris-clar);
  border-radius: 3px;
  color: var(--gris);
  cursor: pointer;
}
ul.llistaRegals li label strong {color: var(--gris);}

ul.llistaRegals label span {
  display: block; 
  padding: 0.5em; 
}
 
ul.llistaRegals input:checked + label
  { border-color: var(--groc-900); background-color: var(--groc-50); color: var(--negre); }

ul.llistaRegals input:checked + label strong {color: var(--negre)}



ul.llistaRegals figure {
  width: auto;
  height: 100px;
  margin-bottom: .1em;
}

  
ul.llistaRegals li.botoCarregaMes {
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
  -ms-flex-direction: column; 
          flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
          justify-content: center;
  background-color: var(--groc-500);
  color: var(--negre);
  color: red;
  text-align: center;
  color: var(--gris-fosc);
  cursor: pointer;
  padding-top: 1rem;
  padding-bottom: 1rem;
  }

ul.llistaRegals li.botoCarregaMes:hover {
  background-color: var(--groc-400); 
  color: var(--negre);
}


@media screen and (min-width: 769px) {

  ul.llistaRegals {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
 
  ul.llistaRegals li {
  width: calc(100% / 6 -1.5%);
   width: calc(100% / 6 - 7px );

  }
}


@media all and (max-width: 600px) {

  ul.llistaRegals li {
    width: calc(100% / 3.33);
  }
}




/* versió horitzontal per als regals */

ul.llistaRadioMiniatures input[type="radio"] {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

ul.llistaRadioMiniatures {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;   margin: 1em 0;
  padding: 0;

}

ul.llistaRadioMiniatures li {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; 
  margin: 0;
  padding: 0 1.5%;
  border-right: 1px dotted var(--gris-clar);
  width: calc(100% / 3.3 - 1.5%);
  list-style: none;
}

ul.llistaRadioMiniatures li {padding: 0 0.5em; margin: 0;} 

ul.llistaRadioMiniatures li input + span,
ul.llistaRadioMiniatures li input:checked + span + small {
  display: block;
}

ul.llistaRadioMiniatures li:not(:first-child) strong {color: inherit;}

ul.llistaRadioMiniatures label{
  cursor: pointer;
  font-size: var(--font-normal);
  line-height: normal;
  color: var(--gris);
  width: 100%;
  line-height: 115%;
  font-size: var(--font-small)
}

ul.llistaRadioMiniatures figure {
  width: auto;
  height: 100px;
  margin-bottom: .25em;
}

ul.llistaRadioMiniatures input:checked + span  {
  color: var(--negre);
  background-color: var(--groc-A100);
}


ul.llistaRadioMiniatures input + span + small {position: absolute; opacity: 0; }

ul.llistaRadioMiniatures input:checked + span + small {
  padding: .5em .65em; 
  display: block;   
  position: static;
  opacity: 1;
  -webkit-transition: opacity .5s linear;
  -o-transition: opacity .5s linear;
  transition: opacity .5s linear;
  -webkit-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
          transition-delay: 0.1s;

} 

ul.llistaRadioMiniatures input + span:not(:empty) {
  padding: .5em .75em;
}

ul.llistaRadioMiniatures input[type="radio"]:checked + label:before {
    font-family: "Material Icons";
    content: "check_box_outline_blank";
    top: 0;
    color: red;
}



@media screen and (min-width: 769px) {

  ul.llistaRadioMiniatures {flex-wrap: wrap;}
  ul.llistaRadioMiniatures li {
  padding: 0;
  width: calc(100% / 7);
  }


ul.llistaRadioMiniatures li:nth-child(7n) {border: none;}

}



@media all and (max-width: 600px) {

  ul.llistaRadioMiniatures li {
    padding: 0;
    width: calc(100% / 2.25);
  }
}






/* Modal (formulari login i menu esquerra filtres) *******************************************************************/


.modal-background {
    background-color: rgba(10,10,10,.75);
}

.modal-content {
  background-color: white;
  padding: 1.75rem;  
  width: 100%;
  max-width: 436px;
  border-radius: 3px
}



#modal-login .modal-content,
#modal-create-account .modal-content {
  max-width: 436px;
  min-height: 200px;
}

#modal-login img.modal-logo,
#modal-create-account img.modal-logo {
  display: block;  
  max-width: 133px;
  margin: 1rem auto .25rem;

}
#modal-error  .modal-content {max-width: 436px}

#modal-login p:last-child {font-weight: bold}

/*
#modal-login .modal-content,
#modal-create-account .modal-content
form {padding: 1.75rem;}
*/

 #modal-cart .icon {vertical-align: bottom;}

#modal-content-cart span {font-weight: bold;}

 
#modal-content-subs {
  border: 5px solid var(--groc-500);
  text-align: center;
  }

#modal-content-subs:before {
  font-family: "Material Icons";
  content: "mail_outline";
  color: var(--groc-500);
  font-size: 400%;
  text-align: center;
  display: block;
  line-height: 1
}

#modal-alertes .modal-content {
  position: absolute;
  margin:.5rem auto;
  top: 0;
    border: 5px solid var(--alerta);
    display: flex;
    border-radius: 3px;
    vertical-align: middle;
    box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);
}

#modal-alertes .modal-content:before {
    font-family: "Material Icons"; /* abans Sharp */
    content: "notification_important"; 
    vertical-align: top;
    line-height: 1;
    margin-right: .5rem;
    color: var(--oferta);
    font-size: 2rem;
}




@media screen and (max-width: 768px) {

.modal-content {
  width: 90%;
  margin: 5%;
padding: 1.5rem;
    max-height: calc(100vh - 130px);
}

.modal-content hr {margin: 1rem 0;}


#modal-menu-esq.modal {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

#modal-menu-esq .modal-content{
  width: 75vw;
  height: 100%;
  min-width: 288px;
  background-color: white;
  padding: 1rem;
  max-height: 100%;
  margin-left: 0;
  box-shadow: 0px 8px 10px -5px rgba(0,0,0,0.2), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 30px 5px rgba(0,0,0,0.12);        
}

.is-large.modal-close {
/*    height: 40px;
    max-height: 40px;
    max-width: 40px;
    min-height: 40px;
    min-width: 40px;
    width: 40px;*/
    background-color: rgba(255,228,59,0.5);
    background-color: rgba(255,255,255,0.5);
}
.is-large.modal-close:hover {
  background-color: rgba(255,228,59,1);
  background-color: rgba(0,0,0,.8);
}

}
@media screen and (max-width: 1023px) {
  .menu-dret .modal-content{
  width: 75vw;
  left: 10vw;
  height: auto;
  min-width: 288px;
  background-color: white;
  padding: 1.5rem 1rem 1rem;
  max-height: 100%;
  text-align: right;
}

.menu-dret .menu-label {margin-right: .75rem; } 

}


@media screen and (max-width: 436px) {

/*.modal-content {padding: 1rem;}*/

 #modal-login .modal-content,
 #modal-menu-esq .modal-content {
  height: 100%;
  max-height: 100%;
}

#modal-login  .modal-close::after, .modal-close::before {
  background-color: #ccc; }
} 

.modal-content .title {margin-bottom: 1rem}

/* Selector de semillas *********************/ 


#selector {max-width: 768px; margin: 0 auto; }
#selector h2 {}

#llistaSelector2 {
  -webkit-columns: 3;
  -moz-columns: 3;
  columns: 3;
}

#llistaSelector {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 2rem 0;
}

#llistaSelector li {width: calc(100% / 3 - 2%); margin-right: 1%}

@media screen and (max-width: 768px) {
  #llistaSelector li {width: calc(100% / 2 - 1%) }

  #selector .button {
    position: -webkit-sticky;
    position: sticky; 
    bottom: 0;
  }
}

@media screen and (max-width: 600px) {
  #llistaSelector li {width: calc(100% / 1); margin-right: 0 }
}


/* AREA D'USUARI *******************************************************************/

#areaUsuari {background-color: var(--gris-ultraclar)}

#areaUsuari  .table {font-size: var(--font-small)}

#areaUsuari .card {border-radius: 6px }

#areaUsuari .subtitle {margin-bottom: .75rem; }

#menu-usuari figure {margin: 0 0 .5rem; text-align: center; font-variant: uppercase; }
#menu-usuari figure img {border: 5px solid var(--groc-corporatiu);}
#menu-usuari h3 {text-transform: uppercase; text-align: center }


#menu-usuari .menu-list a:hover {
  background-color: var(--gris-clar);
  color: var(--negre);
}

#menu-usuari .menu-list a.is-active {
  background-color: var(--groc-corporatiu); 
  color: var(--negre);
}

#menu-usuari ul li a:before,
#modal-menu-usuari ul li a:after{
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Material Icons"; /* abans Sharp */
  width: 1.5em;
  text-align: center;
  vertical-align: middle;
  font-size: 1.25em
}

#menu-usuari ul li.icona-dashboard a:before    { content: "dashboard"; }
#menu-usuari ul li.icona-dades a:before        { content: "perm_contact_calendar"; }
#menu-usuari ul li.icona-social a:before       { content: "people"; }
#menu-usuari ul li.icona-adreces a:before      { content: "location_city"; }
#menu-usuari ul li.icona-descomptes a:before   { content: "money_off"; }
#menu-usuari ul li.icona-cupons a:before       { content: "local_offer"; }
#menu-usuari ul li.icona-historial a:before    { content: "history"; }
#menu-usuari ul li.icona-wishlist a:before     { content: "favorite"; }
#menu-usuari ul li.icona-afiliat a:before      { content: "card_membership"; }
#menu-usuari ul li.icona-configuracio a:before { content: "settings"; }
#menu-usuari ul li.icona-sortir a:before       { content: "exit_to_app"; }

ul li.icona-sortir a { color: var(--alerta); }


#modal-menu-usuari ul li.icona-dashboard a:after    { content: "dashboard"; }
#modal-menu-usuari ul li.icona-dades a:after        { content: "perm_contact_calendar"; }
#modal-menu-usuari ul li.icona-social a:after       { content: "people"; }
#modal-menu-usuari ul li.icona-adreces a:after      { content: "location_city"; }
#modal-menu-usuari ul li.icona-descomptes a:after   { content: "money_off"; }
#modal-menu-usuari ul li.icona-cupons a:after       { content: "local_offer"; }
#modal-menu-usuari ul li.icona-historial a:after    { content: "history"; }
#modal-menu-usuari ul li.icona-wishlist a:after     { content: "favorite"; }
#modal-menu-usuari ul li.icona-afiliat a:after      { content: "card_membership"; }
#modal-menu-usuari ul li.icona-configuracio a:after { content: "settings"; }
#modal-menu-usuari ul li.icona-sortir a:after       { content: "exit_to_app"; }


/*espaiat per les icones 
#areaUsuari i {margin-right: .25em;}
*/


/* menu mobile  */

.modal-menu-usuari .modal_content {
    z-index: 999;
    position: fixed;
    top: 0;
    right: 0;
    overflow-y: auto;
    background: #fff;
    padding: 1rem;
    /* box-shadow: 0 1px 5px rgba(0,0,0,0.7); */
    box-shadow: 0px -5px 10px 8px rgba(0,0,0,0.2), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 30px 5px rgba(0,0,0,0.12);
    width: 75vw;
    height: 100%;
    min-width: 288px;
}



#dashboard h2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#dashboard h2 strong.oferta {
  color: var(--oferta);
  font-weight: bold
}

#dashboard .subtitle {
  margin-bottom: 1rem;
}

#dashboard .linkseccio {
  display: block;
  padding-top: .5em;
  margin-top: 1em;
  border-top: 1px solid var(--gris-clar);
}

#dashboard .is-primary .linkseccio {border-color: white;}

#dashboard ul li {
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
  list-style: none;
}

#dashboard ul li p:not(:first-child) {
  font-size: var(--font-small)
}


/* missatges màrketing al peu del dahsboard usuari */

.bottomAreaUsuari {
  margin-top: 2rem;
  padding: 1rem 2rem;
  background-color: var(--negre);
  color: var(--gris-clar);
  border-radius: 6px;
  font-size: var(--font-small);
}

.bottomAreaUsuari a {
  color: var(--groc-corporatiu);
}

.bottomAreaUsuari strong {
  color: white;
  font-weight: 700
}

.bottomAreaUsuari .material-icons {
  font-size: 400%;
  color: var(--groc-corporatiu);
  margin-top: 1rem;
}

@media screen and (max-width: 768px) {
  .bottomAreaUsuari .columns:not(:last-of-type),
  .bottomAreaUsuari .column:not(:last-of-type) {
    border: none
  }
}


.liniapunts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  line-height: 100%;
}

.liniapunts::before {
  border-bottom: 1px dotted #999;
  content: "";
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 1em;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
  margin: 0 3px;
}

.liniapunts span {
  font-weight: bold;
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 3;
  order: 3;
  padding-top: 0.25em;
  margin-left: auto;
}

#dashboard .avis-cistella .subtitle,
#dashboard .avis-comanda .subtitle {
  margin-bottom: .5rem;
}

.avis-cistella .material-icons,
.avis-comanda .material-icons {
  background-color: var(--negre); 
  color: var(--groc-500); 
  font-size: 125%; 
  padding: .33em; 
  border-radius: 50px; 
  vertical-align: middle;
}

#dashboard #returns .producte-card .button {margin-top: .5rem;}
#dashboard #returns h3.subtitle {margin-bottom: .5rem;}
#dashboard #returns .productes.graella {margin: 1rem 0 0 0;}

#dashboard .productes.graella .producte-card {
    width: calc(100% / 5 - 1%);
}

#returns .productes.graella .producte-card {
    width: calc(100% / 6 - 1%);
}

@media screen and (max-width: 1024px) {
#dashboard .productes.graella .producte-card {
    width: calc(100% / 3 - 1%);
}
}

@media screen and (max-width: 768px) {
#dashboard .productes.graella .producte-card,
#returns .productes.graella .producte-card  {
    width: calc(100% / 2 - 3%);
}
}

#dashboard .productes.graella {margin-bottom: 1rem;}

#adreces .card {
/* border: 1px solid var(--gris-clar);
box-shadow: none; */ 
}

#adreces .card-footer {  font-size: var(--font-small)}

#adreces .predeterminada .card {
  border: 2px solid var(--groc-A700);
  background-color: var(--groc-100);
}

#adreces .predeterminada .card-footer-item,
#adreces .predeterminada .card-footer {
   border-color: var(--groc-A700);
 /* background-color: white;*/
}

#adreces .predeterminada .card ul:before {
  font-family: "Material Icons"; /* abans Sharp */
  content: "check_circle_outline";
  float: right;
  font-size: 200%;
  line-height: 1;
}

#adreces .disabled .card {
  border-color: var(--gris-ultraclar);
  background-color: var(--gris-ultraclar);
  color: var(--gris-clar);  
}


#adreces .disabled ul li:first-child {color: var(--gris-clar) ;}




#adreces ul li:first-child {font-weight: bold; color: var(--negre);}

#descomptes dl {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  margin: 0;
}

#descomptes dt,
#descomptes dd {
  box-sizing: border-box;
  margin: 0;
  padding: .25em;
  border-bottom: 1px solid var(--gris-clar);
  font-weight: normal;
  line-height: 1.25em
}

#descomptes dt {width: calc(50% - .5em); text-align: right; font-weight: bold }
#descomptes dd {width: calc(50% - .5em);}

#cupons td, #cupons th {text-align: center}
#cupons td:first-child, #cupons th:first-child {text-align: left}

.token strong {background-color: var(--groc-corporatiu); padding: 0 .125em;}


#history .miniatures {
  margin-top: .5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

}
#history .miniatures li {
  width: calc(100% / 8 - 1%);
  padding: 0;
  margin-right: 1%;
}

/* imatge quadrada */
#history figure {
  width: 100%;
  height: 0;
  min-height: 1px;
  padding-bottom: 100%;
  position: relative;
  margin-right: 1%;
}

#history figure img {
  bottom: 0;
  height: 100%;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

#modal-albara .modal-content {
  max-width: 436px;
  min-height: 200px;
  background-color: white;
  padding: 1rem;
  font-size: var(--font-small)
}

#modal-albara h1:before {
     font-family: "Material Icons"; /* abans Sharp */
    content: "assignment"; 
    vertical-align: middle;
    margin-right: .25em;
    font-size: var(--font-large);
}

#modal-albara h3 {font-weight: bold; margin-top: 1em; color: var(--negre);}
table#albara td:not(:first-child) {text-align: right}
table#albara tr:last-child {font-weight: bold; background-color: var(--groc-A100)}

#modal-albara .comentaris {font-style: italic; }

@media screen and (max-width: 768px) {

#areaUsuari.section {padding-top: 0; }

#areaUsuari .columns {
  display: flex;

}

#areaUsuari .columns {
  display: flex;
  flex-direction: column;

}

#areaUsuari .column.is-one-fifth {
  position: -webkit-sticky;
  position: sticky;
  top: 6rem;
  z-index: 20;
  padding-top: 0;
}

#areaUsuari .navbar-menu {box-shadow: none; border-bottom: 0px solid white;}

  /* convertim el menú lateral en horitzontal + scroll */
  #menu-usuari .menu-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    overflow: auto;
    margin: 0 -.75rem;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar; 
    border-bottom: 1px solid var(--gris-clar);
    background-color: white;
    -webkit-box-shadow: 0 0 0.25em 0 rgba(10,10,10,.25);
            box-shadow: 0 0 0.25em 0 rgba(10,10,10,.25);
    background-color: var(--negre);
  }

  #menu-usuari .menu-list li {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }

#menu-usuari .menu-list a {
  background-color: var(--gris-fosc);
  color: var(--gris-ultraclar);
  border-radius: 0;
}

#menu-usuari .menu-list a:hover {
  background-color: var(--gris-fosc);
  color: var(--gris-ultraclar);
}

#menu-usuari .menu-list a.is-active {
  background-color: var(--groc-corporatiu); 
  color: var(--negre);
}

#menu-usuari ul li a:before {
    display: none;
}





}



/* Swiper home ************************************************************* */

.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-button-prev {
  background-image: none;
  left: 1rem;
  right: auto;
}
.swiper-button-next {
  background-image: none;
  right: 1rem;
  left: auto;
}


.swiper-button-prev:before,
.swiper-button-next:after {
  font-family: 'Material Icons'; /* abans Sharp */ 
  font-weight: 600; 
  content: "arrow_back_ios";
  font-size: 2rem;
  color: var(--gris);
  color: white;
  /*text-shadow: 4px 4px 2px rgba(0,0,0,0.9);*/
}
.swiper-button-next:after {
  content: "arrow_forward_ios";
}

.swiper-slide .container {padding-left: 10%; padding-right: 10%; height: auto;}
.swiper-slide .titol {
  font-size: 3rem;
  line-height: 100%;
  font-weight: bold;
  text-shadow: 2px 2px 2px rgba(0,0,0,0.25);
  margin-bottom: 1rem;
}
.swiper-slide .subtitol {
  font-size: 1.5rem;
  line-height: 1.75rem;
  margin-bottom: 1rem;
}
.swiper-slide .codi {
  font-size: 1.5em; 
  font-family: var(--font-family-monospace);
  letter-spacing: .25em;
}
.swiper-slide {background-color: inherit}


/* Galeria pàgina de detall versió mobile ****************************************************

https://idangero.us/swiper/ 
*/

.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-pagination-bullet{ }

#barraBanner .swiper-slide {font-size: var(--font-small); line-height: 1.2em}


/* pàgina error 404 */

#error404 {
  background-color: var(--groc-800);
  text-align: center;
  color: white;
}

#error404 h3 {font-size: 500%; font-weight: bold; }



/* format textos pàgines estàtiqus provinents de la bbdd */

.container.textbbdd {max-width: 768px }
.container.textbbdd h3,
.container.textbbdd h4{
  font-size: var(--font-medium);
  margin: 1.5rem 0 1rem;
  font-weight: 400;
  line-height: 1.25em;
  color: var(--negre);
}

.container.textbbdd p,
.container.textbbdd img {
  margin-bottom: 1em
}


.container.textbbdd .destacat {
  background-color: var(--gris-ultraclar);
  color: var(--negre);
  border: 0px solid var(--gris-clar);
  border-radius: 4px;
  padding: 1.25em;
  font-size: var(--font-medium);
  margin: 1.5em 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: 1.25;
}

.container.textbbdd .destacat:before {
  font-family: "Material Icons"; /* abans Sharp */
  content: "format_quote"; 
  font-size: 400%;
  line-height: 50%;
  margin-right: 1rem;
  color: var(--groc-900);

}


.img-25-dreta,
.img-50-dreta {
  float: right !important;
  margin: 0 0 0.5em 2%;
}

.img-25-esquerra,
.img-50-esquerra {
  float: left !important;
  margin: 0 2% 0.5em 0;
}

.img-25-dreta,
.img-25-esquerra { max-width: 23%}
.img-50-dreta,
.img-50-esquerra { max-width: 48%}


/* Caixes promo cogollo de la suerte */


.caixaPromo3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 3px;
  padding: 2%;
  -webkit-box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, .1);
          box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, .1);
  background-color: var(--negre);
  color: var(--gris-clar);
  margin-bottom: 1.5rem;
  margin-top: -10px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between
}

.caixaPromo3 {
  background-color: var(--groc-A700);
  color: var(--negre);
  text-align: left;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row
}

.caixaPromo-titol {
  font-size: 150%;
  font-weight: 800;
  background: url(http://media.alchimiaweb.com/web/trebol.png) top left no-repeat;
  color: #fff;
  padding-left: 30px;
  line-height: 100%
}

.caixaPromo-intro {
  padding: 0 10px
}

.caixaPromo-codi {
  vertical-align: center
}

.caixaPromo-codi span {
  display: block;
  font-family: monospace;
  letter-spacing: .2em;
  font-weight: 700;
  background-color: #fff;
  color: #212121;
  padding: 5px 10px;
  border-radius: 3px;
  height: auto
}

.caixaPromo3 .caixaPromo-titol {
  background: url(http://media.alchimiaweb.com/web/buda-cogollo-100px.png) left center no-repeat;
  margin: -50px 0;
  padding: 50px 0 50px 110px
}

.caixaPromo3.columna {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 3% 7.5% 5%;
  margin: 60px 0 20px;
  text-align: center
}

.caixaPromo3.columna .caixaPromo-titol {
  background: url(http://media.alchimiaweb.com/web/buda-cogollo-100px.png) top center no-repeat;
  padding: 90px 0 0 0;
  margin: -50px 0 0 0
}

.caixaPromo3.columna .caixaPromo-intro {
  padding: 2.5% 0 5%
}

.cupoCerca .caixaPromo3 {box-shadow: none; margin-bottom: 0.5em}
.cupoCerca .caixaPromo3 .caixaPromo-titol {font-size: var(--font-small)}
.cupoCerca .caixaPromo3 .caixaPromo-titol {background-image: url(http://media.alchimiaweb.com/web/buda-cogollo-50px.png); padding-left: 60px; }




@media all and (max-width:600px) {
  .caixaPromo-titol {
    background-position: center left
  }
  .caixaPromo-intro {
    padding: 10px 0
  }
  .caixaPromo3 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 3% 7.5% 5%;
    margin: 60px 0 20px;
    text-align: center;
  }
  .caixaPromo3 .caixaPromo-titol {
    background: url(http://media.alchimiaweb.com/web/buda-cogollo-100px.png) top center no-repeat;
    padding: 90px 0 0 0;
    margin: -50px 0 0 0
  }
  .caixaPromo3 .caixaPromo-intro {
    padding: 2.5% 0 5%
  }

.cupoCerca .caixaPromo3 {
  margin-top:  -10px;
  padding:  2%;
  text-align: left;

}
.cupoCerca .caixaPromo3 .caixaPromo-titol {
    background: url(http://media.alchimiaweb.com/web/buda-cogollo-50px.png) left center no-repeat;
    margin: -50px 0;
    padding: 50px 0 50px 60px;
}


}

/* pagina de regals */

#presents h3 {color: var(--alerta);}

/* transportation */ 

#calcularTransport {max-width: 1023px; margin: 0 auto;}

.resultatsTransport div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 1em;
  background-color: var(--gris-ultraclar);
  border-radius: 4px;
  margin-bottom: 1rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;

}

.resultatsTransport div h3 {
  width: 30%;
  min-width: 30%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; 
  text-align: center; 
  font-weight: bold; 
  line-height: 1.15em;
  margin-right: 1rem;
  padding-right: 1rem;
  border-right: 1px solid var(--gris-clar);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; 
}

.resultatsTransport div h3:before {  
  font-family: "Material Icons";
  content: "local_shipping"; 
  font-size: 500%;
  line-height: 1;
  text-align: center;
  font-weight: normal;
}
.resultatsTransport div.puntopack h3:before {  
  content: "store_mall_directory"; 
}
.resultatsTransport div.alertes h3:before {  
  content: "error_outline"; 
}

.resultatsTransport div.alertes {
  background-color: var(--groc-corporatiu);
  color: var(--negre);
}

.resultatsTransport div.alertes h3 {border-color: white; }

/* */
.resultatsTransport dl { 
  width: 70%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.resultatsTransport dt,
.resultatsTransport dd {
  box-sizing: border-box;
  margin: 0;
  padding: .25em;
  border-bottom: 1px solid var(--gris-clar);
  font-weight: normal;
  line-height: 1.33em;
  vertical-align: bottom;
}

.resultatsTransport dt {
  width: calc(70%);  
}
.resultatsTransport dd {
  width: calc(30%); 
  text-align: right; 
  font-weight: bold 
}
.resultatsTransport dl dt:last-of-type,
.resultatsTransport dl dd:last-child {
  border: none;}

.resultatsTransport dt + dd + dd.nota {background-color: var(--groc-500); padding: 0.25em .5em; margin-bottom: 1em; } 


.resultatsTransport dl dd.nota {color: var(--exit); width: 100%; text-align: left; font-weight: normal; font-size: var(--font-small)}

.resultatsTransport dl dd.nota strong {color: inherit;}

 .resultatsTransport dl dd.nota:before {
    font-family: "Material Icons"; /* abans Sharp */
    content: "error_outline";
    vertical-align: top;
    margin-right: .25em;
    font-weight: normal;   
  }



 /* */

  .resultatsTransport ul {width: 70%; }

  .resultatsTransport li {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    border-top: 1px solid var(--gris-clar);
    padding-top: 0.25em;
    margin-top: 0.25em;
  
flex-wrap: nowrap

  }

  .resultatsTransport div.alertes li {display: block; border-color: white;}

  .resultatsTransport li span {font-weight: bold}

  .resultatsTransport li:first-child {border: none;}

  .resultatsTransport li strong {color: inherit;}


.resultatsTransport li.nota {
  align-items: flex-start;
  padding-top: 0;
  border: none;
  margin-bottom: 1em; 
  color: var(--gris); 
  font-size: var(--font-small);


border: 2px dotted var(--groc-500);
background-color: white;
padding: 0.5em;


}



.resultatsTransport li.nota:before {
    font-family: "Material Icons"; /* abans Sharp */
    content: "info";
    margin-right: .25em;
    font-weight: normal; 
    font-style: normal; 
    color: var(--groc-900); 
    font-size: 1.5em;

  }

.resultatsTransport li.nota span {font-weight: normal}

#calcularTransport .notification h3 {font-weight: bold;}



  /* input range slider */

  .range {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .range span {font-size: var(--font-medium); font-weight: bold}


  /* http://danielstern.ca/range.css/ */
  input[type=range].slider {
    -webkit-appearance: none;
    width: 100%;
    margin: 1rem;
  }
  input[type=range].slider:focus {
    outline: none;
  }
  input[type=range].slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    box-shadow: 0px 0px 0px rgba(255, 255, 255, 0), 0px 0px 0px rgba(255, 255, 255, 0);
    background: rgba(204, 204, 204, 0.67);
    border-radius: 8px;
    border: 0px solid #ffffff;
  }
  input[type=range].slider::-webkit-slider-thumb {
    box-shadow: 2px 2px 2px rgba(204, 204, 204, 0.67), 0px 0px 2px rgba(217, 217, 217, 0.67);
    border: 1px solid rgba(255, 255, 255, 0.57);
    height: 32px;
    width: 32px;
    border-radius: 100px;
    background: #ffeb3b;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -12px;
  }
  input[type=range].slider:focus::-webkit-slider-runnable-track {
    background: rgba(204, 204, 204, 0.67);
  }
  input[type=range].slider::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    box-shadow: 0px 0px 0px rgba(255, 255, 255, 0), 0px 0px 0px rgba(255, 255, 255, 0);
    background: rgba(204, 204, 204, 0.67);
    border-radius: 8px;
    border: 0px solid #ffffff;
  }
  input[type=range].slider::-moz-range-thumb {
    box-shadow: 2px 2px 2px rgba(204, 204, 204, 0.67), 0px 0px 2px rgba(217, 217, 217, 0.67);
    border: 1px solid rgba(255, 255, 255, 0.57);
    height: 32px;
    width: 32px;
    border-radius: 100px;
    background: #ffeb3b;
    cursor: pointer;
  }
  input[type=range].slider::-ms-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
  }
  input[type=range].slider::-ms-fill-lower {
    background: rgba(204, 204, 204, 0.67);
    border: 0px solid #ffffff;
    border-radius: 16px;
    box-shadow: 0px 0px 0px rgba(255, 255, 255, 0), 0px 0px 0px rgba(255, 255, 255, 0);
  }
  input[type=range].slider::-ms-fill-upper {
    background: rgba(204, 204, 204, 0.67);
    border: 0px solid #ffffff;
    border-radius: 16px;
    box-shadow: 0px 0px 0px rgba(255, 255, 255, 0), 0px 0px 0px rgba(255, 255, 255, 0);
  }
  input[type=range].slider::-ms-thumb {
    box-shadow: 2px 2px 2px rgba(204, 204, 204, 0.67), 0px 0px 2px rgba(217, 217, 217, 0.67);
    border: 1px solid rgba(255, 255, 255, 0.57);
    height: 32px;
    width: 32px;
    border-radius: 100px;
    background: #ffeb3b;
    cursor: pointer;
    height: 8px;
  }
  input[type=range].slider:focus::-ms-fill-lower {
    background: rgba(204, 204, 204, 0.67);
  }
  input[type=range].slider:focus::-ms-fill-upper {
    background: rgba(204, 204, 204, 0.67);
  }

  input[type="range"]:hover::-moz-range-track {
    background: var(--groc-500);
  }


/***** Spinner carregant.... https://codepen.io/josephatR/pen/OdoGEY */ 

.contenidorSpinner {
  width: 100%;
  height: 30vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.spinner {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 5px solid var(--groc-corporatiu);
  background: transparent;
  border-top-color: #efef;
  border-bottom-color: #efef;
  border-left-color: var(--groc-corporatiu);
  -webkit-animation: spin 1.5s linear infinite;
          animation: spin 1.5s linear infinite;
  position: relative;
}

@-webkit-keyframes spin {
  0% {
    background: transparent;
    -webkit-transform: rotate(720deg);
            transform: rotate(720deg);
  }
}

@keyframes spin {
  0% {
    background: transparent;
    -webkit-transform: rotate(720deg);
            transform: rotate(720deg);
  }
}
/*
.read-more-wrap {
  max-height: 600px;
  overflow: hidden
}

.read-more-wrap-tot {
  max-height: inherit
}

#leermas {
  display: none;
  text-align: left;
  cursor: pointer;
  position: absolute;
  top: 1070px;
  height: 180px;
  width: 100%;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjI4Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .28) 17%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(17%, rgba(255, 255, 255, .28)), color-stop(60%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 1)));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .28) 17%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 1) 100%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .28) 17%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 1) 100%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .28) 17%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 1) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .28) 17%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 1) 100%)
}

#leermas span {
  margin-top: 120px;
  display: inline-block;
  background-color: #fff;
  color: #212121;
  padding: 5px 50px;
  border-radius: 3px;
  transition-duration: .5s;
  border: 1px solid #ddd
}

#leermas span:hover {
  background-color: #f0f0f0;
  color: #111
}
*/
#carregaMesComandes, #carregaMes {
  margin-top: 1rem;
}



/* BLOG *************************************************************************************************************************** */

@media screen and (min-width: 769px) {

.section.blog {margin-top: .75rem}

.blogContinguts {
    border-right: 1px solid var(--gris-clar);
    margin-right: 2rem;
    padding-right: 3rem;
}

}

.blogContinguts {
  word-wrap: break-word;

}

/* menu mobile */

.barraMenuBlogMobile {
  background-color: var(--negre); 
  padding: 0.25em  1em; 
  position: -webkit-sticky;
  position: sticky;
  top: 7rem;
}

.barraMenuBlogMobile a {color: var(--gris-clar);}
.barraMenuBlogMobile a:hover {color: white}

.barraMenuBlogMobile a:before {
  font-family: "Material Icons";
  content: "menu";
  font-size: 133%;
  margin-right: .25rem;
  line-height: 1;
  vertical-align: middle;
}

#modal-menuBlogMobile .menu-list a {
    padding: .25em .75em;
/*border-top: 1px solid #dbdbdb;*/
}

#modal-menuBlogMobile .menu-list ul {margin-top: 0; padding-left: 0;}
#modal-menuBlogMobile .menu-list ul a {border: none; font-style: oblique; }
#modal-menuBlogMobile .menu-list li ul {margin-left: 1.5em}


/* index */

#blogSidebar .menu-list a { 
  padding: .25em .75em;
}

#blogSidebar .menu {margin-bottom: 2rem;}

.blog.portada h2.subtitle,
.blog.categoria h2.subtitle,
.blog.manual h2.subtitle,
#resultatsBlog .subtitle {
  font-weight: bold;
  border-bottom: none;
  margin-bottom: 1rem;
}

.blog.portada h2.subtitle a,
.blog.categoria h2.subtitle a,
.blog.manual h2.subtitle a,
#resultatsBlog .subtitle a {
  border-bottom: none
}

.blog .metadades,
#resultatsBlog .metadades {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: var(--font-small);
  border-top: 1px solid var(--gris-clar);
  padding-top: .5em;
  margin-top: .5em;
}

.blog .metadades a {
  text-align: right;
}

.blog .card:not(.is-horizontal) {height: 100%}

.blog .card figure img,
.blog.categoria article figure img,
#resultatsBlog article figure img {
  bottom: 0;
  height: 100%;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

#home .blog {margin-bottom: 1rem;}
#home .blog h3.subtitle {font-size: var(--font-normal); font-weight: bold; margin-bottom: 1em;}
#home .blog p {font-size: var(--font-small); }

@media screen and (max-width: 768px) {
  .blog.portada article.card {
    width: 100%;
    margin: 0 0 2rem;
  }
}


/* post */

.entradaBlog .content figure  {margin-left: 0; margin-right: 0 }

.entradaBlog .content figure.wp_imatge {margin: 0; }
.entradaBlog .content figure figcaption {
  color: var(--gris);
  font-size: var(--font-small);
  margin: .5em 0 1.25em;
}

/*
.entradaBlog .size-large, 
.entradaBlog .size-full {
  width: 100%;
  height: auto;
  }
*/

.entradaBlog .all-columns {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.entradaBlog p:empty {
display: none;
}

.entradaBlog h4 {
  font-size: var(--font-normal);
  font-weight: bold;
  font-style: normal;

}

.entradaBlog h4:before {
  content: "\2B24";
  margin-right: 0.33em;
  font-style: normal;
  font-weight: normal;
  color:  var(--groc-500);

}

/* galeria */

.blog .content .my-gallery a {border: none;}

.entradaBlog  .my-gallery {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    padding: 0;
}

.entradaBlog .content .my-gallery figure {
  width: calc(100% / 4 - 2%);
  margin: 1%;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.1);
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.1);
  font-size: var(--font-xsmall);
}

.entradaBlog .content .my-gallery figure figcaption {
    margin-bottom: 0.75em;
    font-size: var(--font-xsmall)
}

.entradaBlog .my-gallery figure a {
    display: block;
    width: 100%;
    height: 0;
    min-height: 1px;
    padding-bottom: 100%;
    position: relative;
}

.entradaBlog .my-gallery figure a img {
    bottom: 0;
    height: 100%;
    left: 0;
    object-fit: cover;
    object-position: center;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

.entradaBlog table {
 margin: auto;
  border-collapse: collapse;
  overflow-x: auto;
  display: block;
  width: fit-content;
  max-width: 100%;
  }


/* x desactivar mides fixades pel wp */
  .entradaBlog table tr,
  .entradaBlog table td { 
    height: auto !important;
    width: auto !important;
    padding: .25em .5em !important;
  }
  .entradaBlog table * {  font-size: var(--font-small)
 }



#reviews2 form {margin-top: 2rem;}

@media screen and (min-width: 769px) {

  .entradaBlog .content .my-gallery figure {
    width: calc(100% / 6 - 2%);
    margin: 1%;
  }
/*
.entradaBlog .size-medium {
  float: left; 
  margin: 1rem 2rem -1rem 0;
  height: auto;
  }
*/

}





/* pàg categoria */

.entry-header .subtitle {
  margin-bottom: 1rem;
  font-size: var(--font-large)
}

.blog.categoria article footer {
  margin-bottom: 3rem;
}

.notification.descripcioCat {background-color: var(--groc-100); color: var(--negre); margin-bottom: 2rem;}
.notification.descripcioCat h1 {text-transform: uppercase; }

.blog.categoria figure {margin-bottom:  1.5rem; }

.blog.categoria figure figcaption {
  background-color: rgba(0, 0, 0, 0.66);
  color:  white;
  position: absolute;
  bottom: 0;
  padding:  0.25em 1em ;
  font-size: var(--font-small);
}

/*evitem mostrar imatges en l'entradeta del post a la pàgina de categories */
.blog.categoria .entry-content .content img {display: none }

.blog.categoria .entry-content .content h3 {font-size:  var(--font-normal); font-weight:  bold; margin-bottom:  1rem; } 


/* manual de cultivo */

.blog.manual .card:not(:last-child) {
  margin-bottom: 0.75rem;
}

#index-manual {
  background-color: var(--groc-500);
  padding: 1em;
  margin-bottom: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 3px;
}

#index-manual:before {
  font-family: "Material Icons";
  content: "menu_book";
  margin: 0 .5rem;
  color: white;
  font-size: 9rem;
  line-height: 1;
}

#index-manual .menu-list {
  -webkit-columns: 2;
     -moz-columns: 2;
          columns: 2;
}

#index-manual ul.menu-list li {
  margin-left: 1rem;
}

#index-manual ul.menu-list li a {
  border-bottom: 3px solid var(--groc-200);
}

#index-manual ul.menu-list li a:hover {
  background-color: var(--groc-200);
}

.blog.manual .menu-list a {
  padding: .25em .75em
}

#index-manual ul.menu-list li a.is-active {
  background-color: var(--gris-fosc);
  border-color: transparent;
  color: white;
}

.blog.manual h3.title:not(:first-of-type) {
  margin-top: 3rem;
}

.blog.manual h3.title a {
  color: var(--gris-fosc);
  font-weight: normal;
  text-transform: uppercase;
}

.blog.manual h3.title a span {
  background: var(--gris-fosc);
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: var(--gris-ultraclar);
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: .25em;
  text-align: center;
  width: 1.6em;
}

.blog.manual h3.title a:after {
  border: 10px dotted black;
  padding: 15px;
  background: lightblue;
  background-clip: padding-box;
}

@media screen and (min-width: 1024px) {
  .card.is-horizontal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-preferred-size: 50ex;
        flex-basis: 50ex;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 1;
        flex-shrink: 1;
  }
  .card.is-horizontal .card-image {
    -webkit-box-flex: 2;
        -ms-flex: 2;
            flex: 2;
    -ms-flex-negative: 1;
        flex-shrink: 1;
  }
  .card.is-horizontal .card-image .image {
    display: block;
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
  }
  .card.is-horizontal .card-image .image img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }
  .card.is-horizontal .card-content {
    -webkit-box-flex: 3;
        -ms-flex: 3;
            flex: 3;
  }
}

@media screen and (max-width: 1023px) {

#index-manual:before {
display: none
}

#index-manual .menu-list {
  -webkit-columns: 1;
     -moz-columns: 1;
          columns: 1;
}

#index-manual ul.menu-list li {
  margin-left: 0;
}

}  

/* post citat enmig d'un post */  
.card.citaPost {
  font-size: var(--font-small);
  margin: 2rem 0; 
  background-color: #ffffff; 
  color: var(--negre); border-radius: 6px;
  border:  5px solid var(--groc-500);
  box-shadow: 3px 3px 6px rgba(50,50,50,.1);
}

.card.citaPost .subtitle {margin-bottom:  1rem; }
.card.citaPost .subtitle a:before {
      font-family: "Material Icons"; /* abans Sharp */
    content: "subject";
    vertical-align: top;
    margin-right: .15em;
    color: var(--gris);
    font-size: 1.25em;
    font-style: normal;
    padding-top: .15em;
}


/* ara enviem a tal país ************/

.araEnviemPais a {
  display: block;
  padding: 0 2.5% 2% 2.5%;
  border: 5px solid var(--groc-500);
  background-color: var(--groc-500);
  background-color: white;
  color: var(--negre);
  text-align: center;
}

.araEnviemPais a span:nth-child(2) {
  display: block;
  font-weight: 900;
  font-size:2.8vw;
  line-height: 1;
}

.araEnviemPais a:before {
  font-family: "Material Icons";
  content: "local_shipping";
  color: var(--groc-600);
  font-size: 5em;
  line-height: 1;
  display: block;
}

.modal .araEnviemPais a {
  background-color: var(--groc-500)
}

.modal .araEnviemPais a:before {color: var(--negre); }



/* en el manual de cultivo per veure el target del anchor sota la barra fixada */

 :target::before {
  content: "";
  display: block;
  height: 7rem;
  /* fixed header height*/
  margin: -7rem 0 0;
  /* negative fixed header height */
}

.tornarDalt {
  z-index: 30;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.8);
  width: 50px;
  height: 50px;
  display: block;
  text-decoration: none;
  border-radius: 35px;
  -webkit-transition: all 0.5s linear;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.tornarDalt i {
  color: #fff;
  margin: 0;
  position: relative;
  left: .55rem;
  top: .5rem;
  font-size: 2rem;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.ocultar {
  opacity: 0;
}

.mostrar {
  opacity: 1;
}

/* faqs */

      .accordion-faqs {margin-bottom: 4rem;}

      .accordion-faqs h3 {font-size: var(--font-normal); font-weight: bold}

      .accordion-faqs h2.subtitle { margin: 2rem 0 .5rem; font-weight: normal; font-size: var(--font-medium); }

      .accordion-faqs h2.subtitle:first-of-type  {margin-top: 0;} 

      .accordion-faqs h2.subtitle:before {
        font-family: 'Material Icons';
        content: 'trip_origin';
        color: var(--groc-500);   
        font-weight: bold;
        font-style: normal;
        font-size: 1.75rem;  /* Preferred icon size */
        line-height: 1;
        word-wrap: normal;
        white-space: nowrap;
        padding-right: .25rem;
        padding-bottom: 0rem;
        vertical-align: middle;
      }

      .accordion-faqs .ac {
        width: 100%;
      }

      .accordion-faqs .ac {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: auto;
        border-bottom: 2px solid var(--gris-clar) ;
      }

      .accordion-faqs .ac .ac-q {
        text-decoration: none;
        display: block;
        cursor: pointer;
        position: relative;
        padding:  0.5rem 2.5rem 0.5rem 0;
      }

      .accordion-faqs .ac .ac-q:focus {outline: none }

      .accordion-faqs .ac .ac-q::after {
        position: absolute;
        right: 0rem;
        top:0.5rem;
        margin: 0 1rem;

        font-family: 'Material Icons';
        content: 'keyboard_arrow_down';
        color: var(--groc-900);   
        font-weight: normal;
        font-style: normal;
        font-size: 1.5rem;  /* Preferred icon size */
        line-height: 1;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
        white-space: nowrap;
        padding:  0;

        /* Support for all WebKit browsers. */
        -webkit-font-smoothing: antialiased;
        /* Support for Safari and Chrome. */
        text-rendering: optimizeLegibility;

        /* Support for Firefox. */
        -moz-osx-font-smoothing: grayscale;

        /* Support for IE. */
        font-feature-settings: 'liga';
      }

      .accordion-faqs .ac.is-active > .ac-q::after {
        content: 'keyboard_arrow_up'; 
      }

      .accordion-faqs .ac .ac-a {
        overflow-y: hidden;
        padding-right: 2.5rem;
      }

      .accordion-faqs .ac.js-enabled > .ac-a {
        visibility: hidden;
      }

      .accordion-faqs .ac.is-active > .ac-a {
        visibility: visible;
        margin: .0 0 1.5rem;
      }

      .accordion-faqs .ac .title {margin: 0;}
      .accordion-faqs .ac .title a {display: block; padding: .25rem 0}

      .menufaqs {
        position: -webkit-sticky;
        position: sticky;
        top: 7rem;
      }