/*
 Nippelit.fi – optimoidut responsiiviset lisätyylit
 Lataa style.css- ja y_html_default_style.css-tiedostojen jälkeen.
 Mobiilisäännöt vaikuttavat vain enintään 760 px leveisiin näyttöihin.
*/

/* Yleiset rajaukset */
html { max-width: 100%; }
img, video, iframe { max-width: 100%; }
.wrapper, .wrapper2, .navbar, .footer { box-sizing: border-box; }

/* =====================================================
   Yleinen mobiiliasettelu
   ===================================================== */
@media screen and (max-width: 760px) {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { max-width: 100%; overflow-x: hidden; }

  .wrapper, .wrapper2, .navbar, .footer,
  .leftcolumn, .centercolumn, .rightcolumn, .middlecolumn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .leftcolumn, .centercolumn, .rightcolumn, .middlecolumn {
    float: none !important;
    overflow-wrap: break-word;
  }
  .centercolumn { padding-left: 10px; padding-right: 10px; }
  .footer, .footer_txt, .footer_txt a { overflow-wrap: break-word; }

  .logobkg, .logobkg_mobile { max-width: 100%; }
  .logobkg { background-position: right top; }
  .header_table { height: auto; max-width: 100%; }
  .header_table_kuva {
    max-width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .buttons, .buttons2 {
    max-width: 100%;
    margin-left: 0;
    padding-left: 0;
    white-space: normal;
  }
  .buttons a, .buttons strong {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
  }

  .grouplist, .productlist {
    float: none !important;
    clear: both;
    max-width: 100% !important;
  }
  .thumbnail, .productname, .addtocart { max-width: 100%; }
  .thumbnail img, .productlist img, #centercolumn1 img {
    max-width: 100% !important;
    height: auto !important;
  }

  table { max-width: 100%; }
  input, select, textarea, button { max-width: 100%; }
  input[type="text"], input[type="password"], input[type="email"],
  input[type="search"], select, textarea { box-sizing: border-box; }

  /* Tuotelista: yksi tuote per rivi */
  .centercolumn .productlist,
  .centercolumn .productlist * { box-sizing: border-box !important; }
  .centercolumn .productlist {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 12px 0 !important;
    padding: 10px !important;
  }
  .centercolumn .productlist .thumbnail,
  .centercolumn .productlist .productname,
  .centercolumn .productlist .addtocart {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
  }

  /* Tuotesivun lomakkeen sisältö */
  #centercolumn1 form { width: 100% !important; max-width: 100% !important; }
  #centercolumn1 form > table,
  #centercolumn1 form > table > tbody,
  #centercolumn1 form > table > tbody > tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #centercolumn1 form > table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 0 !important;
  }
  #centercolumn1 form table { width: 100% !important; max-width: 100% !important; }
  #centercolumn1 form img { max-width: 100% !important; height: auto !important; }
  #centercolumn1 form img[src*="dot_blue_dark.gif"] {
    width: 100% !important;
    height: 1px !important;
  }
  #centercolumn1 td[width="370"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #centercolumn1 td[width="370"] table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }
  #centercolumn1 td[width="370"] table tr,
  #centercolumn1 td[width="370"] table td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #centercolumn1 td[width="370"] table div[style*="width:210px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  #centercolumn1 td[width="370"] img {
    display: block !important;
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Navigointi */
  #navbar1 {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-top: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    z-index: 10 !important;
  }
  #navbar1 > table {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    table-layout: fixed !important;
  }
  #navbar1 td {
    width: auto !important;
    height: auto !important;
    padding: 6px 3px !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }
  #navbar1 td.buttons { width: 16% !important; }
  #navbar1 td.buttons2 { width: 24% !important; }
  #navbar1 a {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Vieritettävä tuoteryhmävalikko */
  #leftcolumn1 {
    height: auto !important;
    min-height: 0 !important;
    max-height: 180px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }
  #leftcolumn1 > table {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
  }
  #leftcolumn1 td.dropmenu, #leftcolumn1 td.dropmenu_active {
    height: auto !important;
    padding: 2px 5px !important;
    line-height: 1.2 !important;
  }
  #leftcolumn1 td.dropmenu a, #leftcolumn1 td.dropmenu_active a {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  #leftcolumn1 > table > tbody > tr:has(span.menuotsikko) { display: none !important; }
}

/* =====================================================
   Mobiiliylätunniste: tuotehaku ja kirjautuminen
   ===================================================== */
@media screen and (max-width: 760px) {
  #logobkg1, #logobkg1 .header_table {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  #logobkg1 {
    overflow: hidden !important;
    background-image: none !important;
  }
  #logobkg1 .header_table {
    border-spacing: 0 !important;
    border-collapse: collapse !important;
  }
  #logobkg1 .header_table td {
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
  }
  #logobkg1 .header_table_kuva { height: auto !important; min-height: 0 !important; }

  /* Lomakkeiden ulompi taulukko pitää ne rinnakkain */
  #logobkg1 > .header_table > tbody > tr:nth-child(2) > td {
    width: 100% !important;
    height: auto !important;
  }
  #logobkg1 > .header_table > tbody > tr:nth-child(2) > td > table {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }
  #logobkg1 > .header_table > tbody > tr:nth-child(2) > td > table > tbody > tr {
    display: table-row !important;
  }
  #logobkg1 > .header_table > tbody > tr:nth-child(2) > td > table > tbody > tr > td {
    display: table-cell !important;
    width: 50% !important;
    min-width: 0 !important;
    padding: 2px !important;
    vertical-align: top !important;
  }

  #logobkg1 #frmSearch1, #logobkg1 #form1 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #logobkg1 .loginbox {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
  }
  #logobkg1 .loginbox tr { height: auto !important; }
  #logobkg1 .loginbox td {
    height: auto !important;
    padding: 1px 5px !important;
    line-height: 1.1 !important;
    vertical-align: middle !important;
  }
  #logobkg1 font.loginbox, #logobkg1 a { font-size: 12px !important; }

  /* Tuotehaun otsikko ja 190 px leveä hakukenttä */
  #frmSearch1 > table {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }
  #frmSearch1 > table > tbody { display: table-row-group !important; }
  #frmSearch1 > table > tbody > tr { display: table-row !important; }
  #frmSearch1 > table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 2px 0 !important;
    text-align: left !important;
  }
  #frmSearch1 > table > tbody > tr > td:nth-child(2) { display: none !important; }
  #frmSearch1 > table > tbody > tr > td:first-child {
    padding-top: 0 !important;
    padding-bottom: 1px !important;
    white-space: nowrap !important;
  }
  #frmSearch1 input[name="term"] {
    display: block !important;
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    height: 25px !important;
    min-height: 25px !important;
    margin: 0 !important;
    padding: 2px 5px !important;
    box-sizing: border-box !important;
  }
  #frmSearch1 input[type="submit"] {
    display: block !important;
    height: 27px !important;
    min-height: 27px !important;
    margin: 3px 0 0 !important;
    padding: 2px 7px !important;
  }

  /* Kirjautumiskentät rinnakkain; OK vasemman kentän alla */
  #logobkg1 #form1 table.loginbox td:nth-child(2) {
    vertical-align: top !important;
    white-space: nowrap !important;
  }
  #logobkg1 #form1 table.loginbox td:nth-child(2) > div {
    display: grid !important;
    grid-template-columns: 100px 100px !important;
    grid-template-rows: 27px 27px !important;
    gap: 3px !important;
    justify-content: start !important;
    align-items: start !important;
    width: 203px !important;
    margin: 0 !important;
    position: relative !important;
    top: 12px !important;
  }
  #logobkg1 #form1 input[name="user"],
  #logobkg1 #form1 input[name="passwrd"] {
    display: block !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
    margin: 0 !important;
    padding: 2px 4px !important;
    box-sizing: border-box !important;
  }
  #logobkg1 #form1 input[name="OK"] {
    display: block !important;
    grid-column: 1 / 2 !important;
    justify-self: start !important;
    height: 27px !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 2px 6px !important;
  }

  #logobkg1 #form1 table.loginbox td:first-child { vertical-align: top !important; }
  #logobkg1 #form1 table.loginbox td:first-child > div {
    position: relative !important;
    top: -7px !important;
  }
  #logobkg1 #form1 table.loginbox td:last-child {
    position: relative !important;
    top: -25px !important;
    text-align: right !important;
    vertical-align: top !important;
    padding-right: 0 !important;
    white-space: nowrap !important;
  }
  #logobkg1 input { font-size: 11px !important; }
  #logobkg1 form { margin: 0 !important; padding: 0 !important; }
}

/* =====================================================
   Mobiiliostoskärry: muokattava ostoskoritaulukko
   ===================================================== */
@media screen and (max-width: 760px) {
  #centercolumn1 form[name="frmUpdateCart"] > table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    table-layout: auto !important;
  }
  #centercolumn1 form[name="frmUpdateCart"] > table > tbody > tr:first-child {
    display: none !important;
  }
  #centercolumn1 form[name="frmUpdateCart"] > table > tbody > tr:nth-child(2) {
    display: block !important;
    width: 100% !important;
    border: 1px solid #ddd !important;
    margin-bottom: 10px !important;
  }
  #centercolumn1 form[name="frmUpdateCart"] > table > tbody > tr:nth-child(2) > td {
    display: block !important;
    width: 100% !important;
    padding: 7px 8px !important;
    text-align: left !important;
    border: 0 !important;
    border-bottom: 1px solid #ddd !important;
  }
  #centercolumn1 form[name="frmUpdateCart"] > table > tbody > tr:nth-child(2) > td:nth-child(1)::before { content: "Kpl: "; font-weight: bold; }
  #centercolumn1 form[name="frmUpdateCart"] > table > tbody > tr:nth-child(2) > td:nth-child(2)::before { content: "Tuote: "; font-weight: bold; }
  #centercolumn1 form[name="frmUpdateCart"] > table > tbody > tr:nth-child(2) > td:nth-child(3)::before { content: "Tuotenro: "; font-weight: bold; }
  #centercolumn1 form[name="frmUpdateCart"] > table > tbody > tr:nth-child(2) > td:nth-child(4)::before { content: "Hinta/kpl: "; font-weight: bold; }
  #centercolumn1 form[name="frmUpdateCart"] > table > tbody > tr:nth-child(2) > td:nth-child(5)::before { content: "Hinta yht.: "; font-weight: bold; }

  #centercolumn1 form[name="frmUpdateCart"] input[type="text"] {
    display: inline-block !important;
    width: 65px !important;
    min-width: 0 !important;
    height: 32px !important;
  }
  #centercolumn1 form[name="frmUpdateCart"] > table > tbody > tr:nth-child(3) > td {
    display: block !important;
    width: 100% !important;
    padding: 10px 5px !important;
    text-align: right !important;
    border: 0 !important;
  }
  #centercolumn1 form[name="frmUpdateCart"] > table > tbody > tr:nth-child(4) > td {
    display: block !important;
    width: 100% !important;
    padding: 5px !important;
    border: 0 !important;
  }
  #centercolumn1 form[name="frmUpdateCart"] > br { display: none !important; }
}

/* =====================================================
   Mobiiliostoskärry: pelkkä, ei-muokattava tuoterivi
   ===================================================== */
@media screen and (max-width: 760px) {
  /* Oletus: tämä taulukko on centercolumn1:n suora lapsi. */
  #centercolumn1 > table[width="500"] {
    width: 100% !important;
    border: 0 !important;
    table-layout: auto !important;
  }
  #centercolumn1 > table[width="500"] > tbody > tr:first-child { display: none !important; }
  #centercolumn1 > table[width="500"] > tbody > tr:nth-child(2) {
    display: block !important;
    width: 100% !important;
    border: 1px solid #ddd !important;
    margin-bottom: 10px !important;
  }
  #centercolumn1 > table[width="500"] > tbody > tr:nth-child(2) > td {
    display: block !important;
    width: 100% !important;
    padding: 7px 8px !important;
    text-align: left !important;
    border: 0 !important;
    border-bottom: 1px solid #ddd !important;
  }
  #centercolumn1 > table[width="500"] > tbody > tr:nth-child(2) > td:nth-child(1)::before { content: "Kpl: "; font-weight: bold; }
  #centercolumn1 > table[width="500"] > tbody > tr:nth-child(2) > td:nth-child(2)::before { content: "Tuote: "; font-weight: bold; }
  #centercolumn1 > table[width="500"] > tbody > tr:nth-child(2) > td:nth-child(3)::before { content: "Hinta/kpl: "; font-weight: bold; }
  #centercolumn1 > table[width="500"] > tbody > tr:nth-child(2) > td:nth-child(4)::before { content: "Hinta yht.: "; font-weight: bold; }

  /* Maksajan tiedot -taulukko. Lisää HTML-taulukolle class="customer-info". */
  #centercolumn1 table[width="500"].customer-info {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }
  #centercolumn1 table[width="500"].customer-info > tbody { display: table-row-group !important; }
  #centercolumn1 table[width="500"].customer-info > tbody > tr {
    display: table-row !important;
    width: auto !important;
    margin: 0 !important;
    border: 0 !important;
  }
  #centercolumn1 table[width="500"].customer-info > tbody > tr > td {
    display: table-cell !important;
    width: auto !important;
    padding: 7px 8px !important;
    border: 1px solid #ddd !important;
    text-align: left !important;
    vertical-align: middle !important;
    overflow-wrap: anywhere !important;
  }
  #centercolumn1 table[width="500"].customer-info > tbody > tr > td:first-child {
    width: 105px !important;
    font-weight: bold !important;
    white-space: nowrap !important;
  }
  #centercolumn1 table[width="500"].customer-info td::before { content: none !important; }

 /* =====================================================
   Kirjautuminen – mobiiliasettelu
   ===================================================== */
@media screen and (max-width: 760px) {

  #logobkg1 #form1 table.loginbox {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-collapse: collapse !important;
  }

  #logobkg1 #form1 table.loginbox tbody,
  #logobkg1 #form1 table.loginbox tr {
    display: block !important;
    width: 100% !important;
  }

  #logobkg1 #form1 table.loginbox td {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 2px 0 !important;
    text-align: left !important;
    position: static !important;
    white-space: normal !important;
  }

  /* Kirjaudu ulos – sama vasen reuna kuin user-kentällä */
  #logobkg1 #form1 table.loginbox td:first-child > div {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* Käyttäjätunnus ja salasana rinnakkain */
  #logobkg1 #form1 table.loginbox td:nth-child(2) > div {
    display: grid !important;
    grid-template-columns: 100px 100px !important;
    grid-template-rows: 27px 27px !important;
    gap: 3px !important;
    justify-content: start !important;
    align-items: start !important;
    width: 203px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
  }

  #logobkg1 #form1 input[name="user"],
  #logobkg1 #form1 input[name="passwrd"] {
    display: block !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 27px !important;
    margin: 0 !important;
    padding: 2px 4px !important;
    box-sizing: border-box !important;
  }

  /* OK käyttäjätunnuksen alle */
  #logobkg1 #form1 input[name="OK"] {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    height: 27px !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 2px 6px !important;
  }

  /* Kirjautumistieto OK-napin oikealle puolelle */
  #logobkg1 #form1 table.loginbox td:nth-child(4) {
    display: block !important;
    position: relative !important;
    margin-top: -27px !important;
    margin-left: 80px !important;
    width: calc(100% - 80px) !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    line-height: 27px !important;
  }

  /* Muuta tietojasi kirjautumistiedon alapuolelle */
  #logobkg1 #form1 table.loginbox td:nth-child(3) {
    display: block !important;
    position: relative !important;
    margin-top: -10px !important;
    margin-left: 80px !important;
    width: calc(100% - 80px) !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    line-height: 27px !important;
  }

  #logobkg1 #form1 input {
    font-size: 11px !important;
  }

  #logobkg1 #form1 {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Erittäin kapeat puhelimet */
@media screen and (max-width: 420px) {
  h1 { font-size: 20px; }
  h2 { font-size: 18px; }
  h3 { font-size: 16px; }
}