/* corpo */



  /* navigazione */
  section#navigazione {padding: 0 .5rem .5rem}
    section#navigazione nav {border-bottom: 1px solid #E6E6E6; margin-bottom: 5px}
      section#navigazione nav:last-child {border-bottom: 0; margin-bottom: 0}
    section#navigazione .breadcrumbs {margin-bottom: 0; margin-top: -0.2rem}
    section#navigazione .breadcrumbs:not(*:root) {margin-top: -0.15rem}
      section#navigazione .breadcrumbs li {font-size: 0.8rem; line-height: 1.2; text-transform: none}
      section#navigazione .breadcrumbs li span.last {color: #b0b0b0}
      .breadcrumbs li:not(:last-child)::after {content: ">"; margin: 0 .5rem; top: -1px}
      section#navigazione .breadcrumbs a {color: #333}
        section#navigazione .breadcrumbs a:hover, section#navigazione .breadcrumbs a.current {color: #F60}



  /* scheda  */
  section#scheda {background: #FFF; color: #333; font: 400 0.9rem  "Roboto", sans-serif; padding: 1rem; padding-bottom: 0; position: relative}
    section#scheda h1 {color: #333; font: 500 1.1rem "Roboto", sans-serif; margin-bottom: 0}

    /* section#info */
      section#info div.pt1 a {color: #333}
        section#info div.pt1 a:hover {color: #000}
      section#info div.pt1 p {margin-bottom: 0.1rem}
      section#info div.pt2 ul {font: 0.8rem/1rem "Roboto", sans-serif; list-style: none; margin-left: 0; margin-top: 20px}
        section#info div.pt2 ul li {background: #F2F2F2 url(../_img2/consegna-gratis.png) no-repeat .5rem center; margin-bottom: .6rem; padding: 0.2rem; padding-left: 3rem}
          section#info div.pt2 ul a {color: #333}
          section#info div.pt2 ul li.li0 {background: none; border-top: 1px dashed #ccc; padding: .6rem 0}
          section#info div.pt2 ul li.li1 {background: #E2E2E2 url(../_img2/sconti-business.png) no-repeat .5rem center}
          section#info div.pt2 ul li.li2 {background: #E2E2E2 url(../_img2/sostituzione-merce.png) no-repeat .5rem center}
          section#info div.pt2 ul li.li3 {background: #F2F2F2 url(../_img2/raccolta-punti.png) no-repeat .5rem center}
          section#info div.pt2 ul li.li4 {background: #F2F2F2 url(../_img2/pagamenti-rateali.png) no-repeat .5rem center}
          section#info div.pt2 ul li.li5 {background: #E2E2E2 url(../_img2/ordini-telefonici.png) no-repeat .5rem center}

    div.galleria2 {margin-bottom: -1rem}
    div.galleria2 img {border: 1px solid #EDEDED; cursor: pointer; margin-bottom: .9375rem}

    /* section#foto */
      section#foto .galleria .foto {padding: .5rem}
      section#foto .galleria img {border: 1px solid #EDEDED; cursor: pointer}
      section#foto .galleria .slick-next, section#foto .slick-prev {border: none; color: #9D9EA0; cursor: pointer; font: 2rem "Roboto", sans-serif; height: 100%; position: absolute; top: 0; width: 35px}
      section#foto .galleria .slick-prev, section#foto .galleria .slick-next {top: 55%}
      section#foto .galleria .slick-prev {left: -25px}
      section#foto .galleria .slick-prev .fa-chevron-left {display: none}
      section#foto .galleria .slick-next {right: -10px}
      section#foto .galleria .slick-next .fa-chevron-right {display: none}
      section#foto .galleria .slick-prev i, section#foto .slick-next i {margin: 0 0.2rem}

      /* watermark esaurito */
      .wtrmrk-container {position: relative}
      .wtrmrk-container .greyscale {filter: grayscale(100%)}
      .wtrmrk-container .watermark {position: absolute; top: 0; left: 0; opacity: 0.5}
      


    /* section#dati */
      section#dati p {line-height: 1rem}
      section#dati div.pt0 .prezzoVecchio {color: #F00; font-size: 1.1rem; text-decoration: line-through}
        section#dati div.pt0 .prezzoVecchio span {color: #333}
      section#dati div.pt0 .prezzo {color: #060; display: block; font-size: 3.6rem; font-weight: bold; letter-spacing: -.2rem}
        section#dati div.pt0 .prezzo .piccolo {font-size: 2rem}
        section#dati div.pt0 .prezzo .prezzoIva {color: #666; display: inline-block; font-size: 0.8rem; font-weight: normal; letter-spacing: normal; margin-bottom: .3rem}
      section#dati div.pt0 .prezzoCad {color: #666; display: block; font-size: 0.85rem; margin-bottom: .5rem}
      section#dati div.pt0 .risparmio {display: block; margin-bottom: .5rem}
        section#dati div.pt0 .risparmio strong, section#dati div.pt0 .spedizione {color: #F60; font-size: 1.1rem}

      section#dati div.pt1 select {font-size: .8rem; height: 1.8rem; padding-top: .15rem; padding-bottom: .15rem; margin-bottom: 1rem}

      /* Opzioni disabilitate (greyout) nelle tendine varianti */
      section#dati select option.option-disabled,
      section#dati select option:disabled {
        color: #999 !important;
        background-color: #f5f5f5 !important;
        cursor: not-allowed !important;
        font-style: italic;
      }
      section#dati select option.option-disabled:hover,
      section#dati select option:disabled:hover {
        background-color: #f5f5f5 !important;
      }

      /* Stili per le scritte nelle option con Select2 */
      .option-badge {
        font-size: 0.85em;
        color: #666;
        font-style: italic;
        margin-left: 0.5em;
      }
      .option-ultimi-pezzi {
        color: #f60;
      }
      .option-disp-limitata {
        color: #999;
      }
      
      /* Stili Select2 per renderle simili alle select vanilla */
      section#dati .select2-container {
        width: 100% !important;
        margin-bottom: 1rem !important;
      }
      section#dati .select2-container--default .select2-selection {
        border: 1px solid #aaa !important;
        border-radius: 0 !important;
        min-height: 1.8rem !important;
        height: auto !important;
        padding-top: 0.15rem !important;
        padding-bottom: 0.15rem !important;
        background-color: #fff !important;
        font-size: 0.8rem !important;
      }
      section#dati .select2-container--default .select2-selection__rendered {
        line-height: 1.5 !important;
        padding-left: 0.5rem !important;
        padding-right: 1.5rem !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }
      section#dati .select2-container--default .select2-selection__arrow {
        height: 1.8rem !important;
        right: 0.5rem !important;
      }
      section#dati .select2-container--default .select2-selection__arrow b {
        border-color: #333 transparent transparent transparent !important;
        border-style: solid !important;
        border-width: 5px 4px 0 4px !important;
        height: 0 !important;
        left: 50% !important;
        margin-left: -4px !important;
        margin-top: -2px !important;
        position: absolute !important;
        top: 50% !important;
        width: 0 !important;
      }
      section#dati .select2-container--default.select2-container--open .select2-selection__arrow b {
        border-color: transparent transparent #333 transparent !important;
        border-width: 0 4px 5px 4px !important;
      }
      section#dati .select2-dropdown {
        border: 1px solid #aaa !important;
        border-radius: 0 !important;
        font-size: 0.8rem !important;
      }
      section#dati .select2-results__option {
        padding: 0.25rem 0.5rem !important;
      }
      section#dati .select2-results__option--highlighted {
        background-color: #5897fb !important;
        color: #fff !important;
      }
      
      /* Stili per le option nel dropdown di Select2 */
      section#dati .select2-results__option .option-badge {
        font-size: 0.75em;
        color: #666;
        font-style: italic;
        margin-left: 0.5em;
      }
      section#dati .select2-results__option .option-ultimi-pezzi {
        color: #f60;
      }
      section#dati .select2-results__option .option-disp-limitata {
        color: #999;
      }

      .product-extra {align-items: center; background: #ffc; border: 1px solid #ff2600; display: flex; flex-direction: row; margin-bottom: 20px}
      .product-extra a {color: #333}
      .product-extra a strong {color: #060}
      .rectangle {background: #ff2600; height: 53px; width: 60px}
      .icon {align-items: center; display: flex; height: 100%; justify-content: center}
      .icon > .fa-percent {color: #fff; font-size: 22px}
      .icon > .fa-heart {color: #fff; font-size: 22px}
      /*.promo-text {
          background: #f2f3bc; 
          font-size: .85rem;
          height: 100%;
          padding: 10px;
          display: flex;
          align-items: center;
          flex: 1;
      }*/
      @media screen and (min-width: 64em) {
        .rectangle {width: 50px}
      }      

      .product-extra2 {background: yellow; margin-bottom: 20px; padding: 5px 3px 10px}
      .product-extra2 a {color: #000}
      .product-extra2 a strong {color: #000}
      .promo-title {color: #000; font-weight: bold; padding: 5px}
      .promo-text {color: #000; font-size: 14px; line-height: 1.25; padding: 0 5px;}
      span.gt {color: #f79f87; display: inline-block; margin: 0 3px; font-size: 14px; font-weight: bold}


      /* section#dati div.pt2 */
        section#dati div.pt2 .button {font: 700 1rem "Roboto", sans-serif; margin-bottom: .5rem}
        section#dati div.pt2 .carrello {background: #107710; font-size: 1.4rem}
          section#dati div.pt2 .carrello:focus, section#dati div.pt2 .carrello:hover {background: #0B4B0B; color: #FFF}
        section#dati div.pt2 .secondary {background: #797979; font-size: 1rem; margin-bottom: 1rem}
          section#dati div.pt2 .secondary:focus, section#dati div.pt2 .secondary:hover {background: #666; color: #FFF}
        section#dati div.pt2 .nopremium {color: #000; font-size: .85rem; line-height: 1rem; padding-left: 5px}
        section#dati div.pt2 .nopremium i {font-size: 1.1rem; line-height: 1; margin-right: 3px}
        section#dati div.pt2 .tempistiche {color: #f60; font-size: .85rem; line-height: 1rem; padding: 5px}
        section#dati div.pt2 .tempistiche i {background: #fff; font-size: 1.1rem; line-height: 1; margin-right: 3px}
        section#dati .richiedi-info a {font-size: .8rem; color:#333}


      section#dati div.pt3 {border-top: 1px solid #eae7e4; font-size: 0.75rem; line-height: 1rem; padding-top: 15px}
        section#dati div.pt3 p:last-child {margin-bottom: 0}
        section#dati div.pt3 .prezzoVIP {font-size: 2rem; font-weight: bold; color: #E6501E}
          section#dati div.pt3 .prezzoVIP .piccolo {font-size: 1.2rem; font-weight: normal}
        section#dati div.pt3 .scontoVIP {display: inline-block}
          section#dati div.pt3 .scontoVIP .freccia {border-top: 5px solid transparent; border-right: 5px solid #E6501E; border-bottom: 5px solid transparent; display: inline-block; height: 0; width: 0}
          section#dati div.pt3 .scontoVIP .box {background: #E6501E; color: #FFF; display: inline-block; font-weight: bold; padding: .25rem}
        section#dati div.pt3 .notaVIP {color: #797A7C; font-size: .65rem}


      section#dati div.pt4 ul {list-style: none; margin-left: 0}
      section#dati div.pt4 li {border-bottom: 1px dotted #666; padding: 3px 0}
      section#dati div.pt4 a {color: #060; font-weight: bold}
      section#dati div.pt4 i {color: #060; font-size: 1.3rem; bottom: -2px; position: relative; text-align: center; width: 25px}


  /* varianti */
  section#varianti table {border-style: hidden; color: #333; font-size: 1rem; margin-bottom: 0}
    section#varianti table th, td {border: 0}
    section#varianti table th {background: #4B4B4D; border-color: #FFF; color: #FFF; font: 500 0.8rem "Roboto", sans-serif}
      section#varianti table th span {display: block; font-size: 0.8rem}
      section#varianti table th .fa {font-size: 2rem}
      section#varianti table th img {max-height: 45px}

    section#varianti table td {padding: .3rem .625rem; white-space: nowrap}
      section#varianti table td:first-child {padding-top: 1.5rem}
      section#varianti table td:last-child {border-bottom: 1px solid #9D9EA0; padding-bottom: 1.5rem}
        section#varianti table tr:last-child td {border-bottom: 0}
      section#varianti table td span.nome strong {color: #333; font-size: .8rem !important}
      section#varianti table td.col2 {white-space: normal}
      section#varianti table td.col2, section#varianti table td.col4 {font-weight: bold; line-height: 0.8rem; position: relative}
      section#varianti table td.col3 {color: #333}
        section#varianti table td.col3 span.tratteggio {color: #F00; text-decoration: line-through}
        section#varianti table td.col3 span.tratteggio > span {color: #333 !important}
      section#varianti table td.col5, section#varianti table td.col6 {color: #060; font-size: 1.4rem}
      section#varianti table td.col6 {color: #F60}
      section#varianti table td.col6 span {color: #333; display: block; font-size: .6rem; line-height: 1}
      section#varianti td span.prezzoTop {background: #F60; border-radius: .5rem; bottom: 35%; color: #FFF; font-size: .8rem; margin-right: 1rem; padding: .2rem; position: absolute; right: 0}
      section#varianti td span.prezzoCad {color: #000; display: block; font-size: 0.75rem}

  section#varianti table tbody tr:nth-child(2n) {background-color: #FFF}

  section#varianti table .button {font: 700 1rem "Roboto", sans-serif; margin: .5rem 0}
    section#varianti table .button.b1 {background: #107710}
    section#varianti table .button.b1:focus, section#varianti table .button.b1:hover {background: #060; color: #FEFEFE}


  section#varianti .mobile {background: #effaed; font-family: Verdana, Geneva, sans-serif; line-height: 1.2; min-height: 100px; padding: .5rem; position: relative}
  section#varianti .mobile .articolo {border-bottom: 1px solid #CDCDCD; margin-bottom: .5rem; padding-bottom: .5rem}
    section#varianti .mobile .articolo:last-child {border-bottom: 0; margin-bottom: 0; padding-bottom: 0}
    section#varianti .mobile strong.nome {color: #000; display: block; font-size: .9rem; margin-bottom: .2rem}
    section#varianti .mobile span.prezzo1, section#varianti .mobile span.prezzo2, section#varianti .mobile span.sconto, section#varianti .mobile span.spedizione {color: #000; display: block; padding-left: .7rem}
    section#varianti .mobile span.spedizione {font-size: 11px}
    section#varianti .mobile span.prezzo2 {color: #060}
      section#varianti .mobile span.prezzo2 span {color: #000; font-size: .85em}

    section#varianti .mobile .button {font: 700 .8rem "Roboto", sans-serif; margin: 0}
      section#varianti .mobile .button.b1 {background: #107710}
      section#varianti .mobile .button.b1:focus, section#varianti .mobile .button.b1:hover {background: #060; color: #FEFEFE}



  /* descrizione */
  section#descrizione {position: relative}
    section#descrizione .tabs {background: none; border: 0}
    section#descrizione .tabs-title {background: #000; color: #FFF; margin-right: .06rem}
      section#descrizione .tabs-title a {color: #FFF; font: 700 .9rem "Roboto", sans-serif; padding: .45rem}
      section#descrizione .tabs-title > a:focus, .tabs-title > a[aria-selected="true"] {background: #B1B1B1}
      section#descrizione .tabs-title > a:hover {background: #000; color: #FFF}
      section#descrizione .tabs-title.is-active a {color: #333}
      section#descrizione .tabs-title.is-active a:hover {color: #FFF}
    section#descrizione .tabs-content {border: 0; color: #4D4D4F}
    section#descrizione .tabs-content #panel1 {font-size: 1rem; line-height: 1.2rem}
    section#descrizione .tabs-content h2 {font: 500 1.5rem "Roboto", sans-serif; margin-bottom: 1rem}
      section#descrizione .tabs-content p:last-child {margin-bottom: 0}
    section#descrizione .tabs-content .paragrafo {border-bottom: 1px solid #CCC; margin-bottom: 1rem; padding-bottom: 1rem}
      section#descrizione .tabs-content .paragrafo:last-child {border-bottom: 0; margin-bottom: 0; padding-bottom: 0}
      section#descrizione .tabs-content .paragrafo h3 {color: #F60; font-size: 1rem; font-weight: bold; margin-bottom: 0}
      section#descrizione .tabs-content table.modalita tbody {border: 0; line-height: 1rem}
        section#descrizione .tabs-content table.modalita tbody tr:nth-child(2n) {background-color: #FFF}
      section#descrizione .tabs-content table.modalita td {border: 0; border-bottom: 1px solid #CCC}
        section#descrizione .tabs-content table.modalita tr:last-child td {border-bottom: 0}
        section#descrizione .tabs-content table.modalita td.titolo {background: #F1F2F2; color: #F60; font-size: 1rem; font-weight: bold}
      section#descrizione .tabs-content table.modalita img {display: block}
      section#descrizione .dati_sotto_desc {font-family: "Roboto", sans-serif}



  /* correlati */
  section#correlati2 {margin: 0 .8rem 60px}

  section#correlati2 .tabs-title {
    background: #000;
    display: inline-block;
    margin-bottom: -1px;
  }
  
  section#correlati2 .tabs-title span {
    color: #fff;
    display: block;
    font-size: 1rem;
    font-weight: bold;
    padding: 1.25rem 1.75rem;
    text-transform: uppercase;
  }

  section#correlati2 > .row {
    max-width: 73rem;
    padding: 1.75rem 0 0;
  }
  @media screen and (min-width: 64em) {
    section#correlati2  {
      margin: 0 0 60px;
    }    
  }


  section#correlati2 .prod_correlato {
    display: block;
    height: 100%;
    border: 1px solid #eee;
    padding: .15rem;
    color: inherit;
    transition: all 0.3s ease;
  }

  section#correlati2 .prod_correlato:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  section#correlati2 .content {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  section#correlati2 .img-wrapper {
    flex: 0 0 120px;
  }

  section#correlati2 .prod_correlato img {
    width: 100%;
    height: auto;
    display: block;
  }

  section#correlati2 .prod_correlato .text-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  section#correlati2 .prod_correlato strong {
    display: block;
    margin-bottom: 0.5rem;
    color: #000;
  }

  section#correlati2 .prod_correlato p {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.2;
    margin: 0;
  }

  section#correlati {position: relative}
    section#correlati h1 {border-bottom: 1px solid #B1B1B1; color: #333; font: 500 1rem "Roboto", sans-serif; margin-bottom: 1rem}
    section#correlati .wrapImg {overflow: hidden}

    #slickCorrelati {background: #FFF; position: relative}

    #slickCorrelati .slick-next, #slickCorrelati .slick-prev {border: none; color: #060; cursor: pointer; font: 700 2rem "Roboto", sans-serif; height: 100%; position: absolute; top: 0; width: 35px}
    #slickCorrelati .slick-prev {left: -35px}
    #slickCorrelati .slick-next {right: -35px}
    #slickCorrelati .slick-prev i, #slickCorrelati .slick-next i {margin: 0 0.2rem}


  /* conferma aggiunta carrello */
  div.reveal h2 {color: #060 !important; font-size: 1.2rem; font-weight: bold; margin-bottom: 1rem}
  div.reveal p {font-size: .9rem}
  div.reveal .button.grigio {margin-bottom: 1rem}

  #modalProdotto {padding: 0; top: 20px !important; width: max-content}
  #modalProdotto img {max-height: calc(100vh - 40px)}

/* --------------------------- */



/* Medium and up */
@media screen and (min-width: 40em) {
  /* scheda  */
    section#scheda h1 {font-size: 1.8rem}

          section#dati div.pt0 .prezzo .prezzoIva {display: inline-block; margin-bottom: 0}

  /* descrizione */
    section#descrizione .tabs-title {margin-right: .5rem}
      section#descrizione .tabs-title a {font-size: 1rem; padding: 1.25rem 1.75rem}


  /* conferma aggiunta carrello */
  div.reveal .button.grigio {margin-bottom: 0}
}



/* Large and up */
@media screen and (min-width: 64em) {
  /* navigazione */
    section#navigazione .col1 {border-right: 1px solid #333}



  /* scheda  */
        section#dati div.pt2 .bottoni .columns:first-child {padding-right: .1rem}
        section#dati div.pt2 .bottoni .columns:last-child {padding-left: .1rem}

  /* varianti */
    section#varianti table th, td {border: 1px solid #9D9EA0}
    section#varianti table th {background: #4B4B4D; border-color: #FFF; color: #FFF; font: 500 0.8rem "Roboto", sans-serif}
      section#varianti table th span {display: block; font-size: 0.8rem}
      section#varianti table th .fa {font-size: 2rem}

    section#varianti table td {padding: 0 .625rem}
      section#varianti table td:first-child {padding-top: 0}
      section#varianti table td:last-child {padding-bottom: 0}
      section#varianti table td.col2, section#varianti table td.col4 {font-weight: bold; line-height: 0.8rem}
      section#varianti table td.col5 {background: #D9DADC; font: 500 1.6rem  "Roboto", sans-serif}
        section#varianti table td.col5 .spedizione {color: #E6501E; display: block; font-size: .7rem}
      section#varianti table td.col6 {font: 500 1.3rem  "Roboto", sans-serif}
      section#varianti table td.col3, section#varianti table td.col4, section#varianti table td.col5, section#varianti table td.col6 {white-space: nowrap; text-align: center}

  section#varianti table tbody tr:nth-child(2n) {background-color: #F1F1F1}

  section#varianti .button {font: 700 1rem "Roboto", sans-serif}
    section#varianti .button.b1 {background: #107710}
  section#varianti .button.b1:focus, section#varianti .button.b1:hover {background: #060; color: #FEFEFE}

  /* Bottone "Vedi altre foto" */
  .vedi-altre-btn {
    background: #f60 !important;
    border: none !important;
    border-radius: 15px !important;
    padding: 12px 0 !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 15px rgba(246, 96, 0, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    width: 90% !important;
    max-width: 400px !important;
    min-height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .vedi-altre-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(246, 96, 0, 0.4) !important;
  }
  
  .vedi-altre-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 10px rgba(246, 96, 0, 0.3) !important;
  }
  
  .vedi-altre-btn.espanso {
    background: #060 !important;
    box-shadow: 0 4px 15px rgba(6, 0, 0, 0.3) !important;
  }
  
  .vedi-altre-btn.espanso:hover {
    box-shadow: 0 8px 25px rgba(6, 0, 0, 0.4) !important;
  }
  
  .vedi-altre-btn .fa-plus,
  .vedi-altre-btn .fa-minus {
    margin-right: 5px !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  
  .vedi-altre-container {
    margin: 20px 0 !important;
  }
  
  .vedi-altre-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
    z-index: 0;
  }
  
  .vedi-altre-btn:active::before {
    width: 300px;
    height: 300px;
  }
}