/* =====================================================
   NIKWOOD — Responsive Overrides
   Targets the legacy table-based layout across all pages:
     • Landing page (root index.html — language picker)
     • Inner pages (en/, he/, ru/ — header, catalog, product detail, footer)
   ===================================================== */

/* ---------- GLOBAL RESETS ---------- */
html {
  -webkit-text-size-adjust: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* All images must be fluid */
img {
  max-width: 100%;
  height: auto !important;
}

/* Keep wide tables from blowing out the viewport */
table {
  max-width: 100% !important;
}

/* Form inputs should not overflow their containers */
input[type="text"], textarea {
  max-width: 100% !important;
  box-sizing: border-box;
}


/* ==========================================================
   TABLET — up to 960px
   Start shrinking the fixed-width wrapper tables
   ========================================================== */
@media screen and (max-width: 960px) {

  /* Force all the common fixed-width wrappers to fluid */
  table[width="920"],
  table[width="900"],
  table[width="896"],
  table[width="895"],
  table[width="890"],
  table[width="885"],
  table[width="830"],
  table[width="750"],
  table[width="600"],
  table[width="500"] {
    width: 100% !important;
    height: auto !important;
  }

  /* Header bar */
  #header, #header2 {
    position: relative !important;
    height: auto !important;
    min-height: 80px;
    background-size: cover !important;
    padding: 8px 0;
  }

  /* Inner wrapper of header nav */
  #header > tbody > tr > td > table,
  #header table[width="920"] {
    width: 100% !important;
    padding: 0 10px;
  }

  /* Footer */
  #preFooter {
    position: relative !important;
    height: auto !important;
  }
}


/* ==========================================================
   MOBILE — up to 768px
   Stack layout, simplify navigation
   ========================================================== */
@media screen and (max-width: 768px) {

  /* ---------- LANDING PAGE (root index.html) ---------- */
  #HomePageB {
    width: 100% !important;
    height: auto !important;
    background-size: contain !important;
    background-position: center top !important;
    padding: 20px 10px !important;
  }

  /* ---------- HEADER ---------- */
  #header, #header2 {
    position: relative !important;
    height: auto !important;
    padding: 10px 0;
  }

  /* Stack header cells: logo row, then nav items */
  #header table[width="920"] > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 4px 0 !important;
  }

  /* Logo: center & shrink */
  #header td[width="444"] {
    text-align: center !important;
  }
  #header td[width="444"] img,
  #Logo {
    max-width: 240px !important;
    margin: 0 auto;
  }

  /* Nav link cells */
  #header td[width="80"],
  #header td[width="84"],
  #header td[width="106"] {
    display: inline-block !important;
    width: auto !important;
    padding: 6px 8px !important;
  }

  /* Dropdown menus */
  #middlebar, #middlebar2 {
    width: auto !important;
    height: auto !important;
  }

  .submenu, .submenu2 {
    position: static !important;
    width: auto !important;
    left: 0 !important;
    top: 0 !important;
    border: 1px solid #ccc !important;
    z-index: 100;
  }

  /* ---------- MAIN CONTENT TABLES ---------- */
  table[width="920"],
  table[width="900"],
  table[width="896"],
  table[width="895"],
  table[width="890"],
  table[width="885"],
  table[width="830"],
  table[width="750"],
  table[width="600"],
  table[width="500"] {
    width: 100% !important;
    height: auto !important;
  }

  /* Remove spacer <br> pile-up above content */
  body > .style48, body > p.style53 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
  }

  /* ---------- CATALOG LISTING (tables.html, chairs.html, etc.) ---------- */

  /* Outer row that holds two catalog items side-by-side → stack */
  table[width="890"] > tbody > tr > td[width="431"],
  table[width="890"] > tbody > tr > td[width="432"],
  table[width="890"] > tbody > tr > td[width="13"] {
    display: block !important;
    width: 100% !important;
  }

  /* Hide the 13px spacer cell between columns */
  td[width="13"] {
    display: none !important;
  }

  /* Each catalog card */
  #CatalogTable,
  #CatalogTable2,
  #CatalogTable3,
  #CatalogTable4,
  table[id^="CatalogTable"] {
    width: 100% !important;
    margin-bottom: 20px !important;
    float: none !important;
  }

  /* Stack thumbnail + info inside a card */
  #CatalogTable td,
  #CatalogTable2 td,
  #CatalogTable3 td,
  #CatalogTable4 td,
  table[id^="CatalogTable"] td {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 4px 8px !important;
  }

  /* Center catalog thumbnails */
  #CatalogTable img,
  #CatalogTable2 img,
  #CatalogTable3 img,
  #CatalogTable4 img,
  table[id^="CatalogTable"] img {
    margin: 0 auto !important;
    display: block !important;
  }

  /* Product title chip */
  #pro-title {
    margin: 8px auto !important;
    float: none !important;
    display: table !important;
  }

  /* ---------- PRODUCT DETAIL PAGE (tables1.html, etc.) ---------- */

  /* Stack the image gallery & description side by side → vertical */
  table[width="830"] td[width="49%"],
  table[width="830"] td[width="811"] table td[width="49%"],
  table[width="830"] td[width="811"] table td {
    display: block !important;
    width: 100% !important;
  }

  /* Info table */
  #InfoTable {
    width: 100% !important;
  }
  #InfoTable td[width="31%"],
  #InfoTable td[width="69%"] {
    display: inline-block !important;
    width: 48% !important;
    vertical-align: top !important;
  }

  /* Slider / gallery images — this older bxSlider version uses .bx-window
     (not .bx-viewport). It sets inline styles that cause a massive gap.
     We target BOTH class names for safety. */
  #slider1, .bx-wrapper, .bx-viewport, .bx-window {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  /* Beat the inline styles that bxSlider sets on its container */
  .bx-window, .bx-viewport {
    height: auto !important;
    max-height: 70vh !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  .bx-wrapper {
    max-width: 100% !important;
    width: 100% !important;
  }
  #slider1 {
    width: 100% !important;
  }
  #slider1 li {
    width: 100% !important;
    height: auto !important;
    float: none !important;
  }
  #slider1 li img {
    width: 100% !important;
    height: auto !important;
    max-height: 60vh !important;
    object-fit: contain !important;
    display: block;
  }

  /* ---------- HOMEPAGE BUTTONS (Products / Contact / Facebook / About) ---------- */
  table[width="100%"] > tbody > tr > td[width="25%"],
  table[width="100%"] > tbody > tr > td[width="26%"],
  table[width="100%"] > tbody > tr > td[width="24%"] {
    display: inline-block !important;
    width: 48% !important;
    text-align: center !important;
    vertical-align: top !important;
    margin-bottom: 8px;
  }

  /* ---------- HOMEPAGE CONTENT COLUMNS (text + slider) ---------- */
  table[width="895"] > tbody > tr > td[width="503"],
  table[width="895"] > tbody > tr > td[width="447"] {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* ---------- LANGUAGE PICKER (root index.html) ---------- */
  table[width="69%"] {
    width: 100% !important;
  }
  td[width="31%"] {
    display: inline-block !important;
    width: 30% !important;
    text-align: center !important;
    vertical-align: top !important;
  }
  td[width="2%"] {
    display: none !important;
  }

  /* ---------- FOOTER ---------- */
  #preFooter {
    position: relative !important;
    height: auto !important;
    padding: 20px 0 !important;
  }

  #preFooter table[width="900"] {
    width: 100% !important;
    padding: 0 15px;
  }

  /* Stack footer link columns — targets the specific 9% cells used in the footer */
  #preFooter table[width="900"] > tbody > tr > td,
  #preFooter td[width="9%"] {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 10px 15px !important;
    float: none !important;
    line-height: 2.4 !important;
    font-size: 14px !important;
  }

  /* Fix footer link overlap — each link MUST be its own block line */
  #preFooter a {
    display: block !important;
    line-height: 2.6 !important;
    padding: 4px 5px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }
  #preFooter .style43 {
    display: block !important;
    line-height: 2.6 !important;
    font-size: 14px !important;
  }
  /* Hide the <br> tags since we're using display:block for links */
  #preFooter td br {
    display: none !important;
  }
  #preFooter ul {
    padding: 0 !important;
    margin: 5px 0 !important;
    list-style: none !important;
  }
  #preFooter li {
    padding: 3px 0 !important;
    display: block !important;
    line-height: 2.4 !important;
  }

  /* Center footer logo */
  #preFooter div[align="right"] {
    text-align: center !important;
  }
  #preFooter img[name="Nikwood"],
  #Nikwood {
    max-width: 240px !important;
    margin: 0 auto;
    display: block !important;
  }

  /* ---------- CONTACT PAGE (contact.html) ---------- */
  #header2, #header3 {
    position: relative !important;
    left: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
  }

  /* ---------- FORM ELEMENTS ---------- */
  td[width="30%"], td[width="71%"], td[width="70%"] {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 4px 8px !important;
  }
  input[type="text"], textarea {
    width: 100% !important;
    margin-top: 4px;
  }
  form table {
    width: 100% !important;
  }
  form table td {
    display: block !important;
    width: 100% !important;
    padding: 4px 8px !important;
  }
}


/* ==========================================================
   SMALL PHONE — up to 480px
   Further adjustments for very narrow screens
   ========================================================== */
@media screen and (max-width: 480px) {

  /* Buttons go single-column */
  table[width="100%"] > tbody > tr > td[width="25%"],
  table[width="100%"] > tbody > tr > td[width="26%"],
  table[width="100%"] > tbody > tr > td[width="24%"] {
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px;
  }

  /* Language flags stack */
  td[width="31%"] {
    display: block !important;
    width: 100% !important;
    margin-bottom: 12px;
  }

  /* Nav links stack fully */
  #header td[width="80"],
  #header td[width="84"],
  #header td[width="106"] {
    display: block !important;
    width: 100% !important;
    padding: 8px 0 !important;
  }

  /* Product info table rows stack vertically */
  #InfoTable td[width="31%"],
  #InfoTable td[width="69%"] {
    display: block !important;
    width: 100% !important;
  }

  /* Titles */
  .style7, .style8, .style50 {
    font-size: 1.4rem !important;
  }

  /* Page logo even smaller */
  #header td[width="444"] img,
  #Logo {
    max-width: 200px !important;
  }
}