/*
 * Small-screen overrides for the fixed 997px desktop layout.
 * Loaded after main.min.css on the front page only (see _header.php);
 * desktop rendering is untouched.
 */
@media (max-width: 1000px) {

  /* --- generic safety net --- */
  body { overflow-x: hidden; }
  img, input, select, textarea, table { max-width: 100%; }
  img { height: auto; }

  #part1, #part1_body, #part2, #part2_body, #part3_body, #part4_body, #part5_body {
    width: auto;
    min-width: 0;
  }

  /* --- top bar + main menu (was absolute, 960px wide) --- */
  #part1 { height: auto; }
  #part1 #top_signin { padding: 7px 10px 3px; text-align: center; }
  #part1 #menu_body {
    position: static;
    float: none;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    background-color: #333;
    border-radius: 0;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
  }
  #part1 #menu_body #menu-begin { width: 40px; }
  #part1 #menu_body #menu-begin a { margin-left: 15px; }
  #part1 #menu_body .menu-item0 { padding-left: 10px; padding-right: 10px; }
  #part1 #menu_body .menu-item0.has-kids { padding-right: 20px; }
  /* submenus: full width under the menu instead of at the JS-computed offset */
  #part1 .sub-menu1 { left: 0 !important; right: 0; }
  #part1 .sub-menu1-body { float: none; max-height: 70vh; overflow-y: auto; }
  #part1 .sub-menu2 { margin-left: 0; }

  /* --- front page hero --- */
  #newsslider { position: relative; top: 0; }
  #newsslider .content { height: auto; aspect-ratio: 951 / 264; }
  #newsslider .content ul li,
  #newsslider .content ul li .holder1 { height: 100%; }
  #newsslider .content ul li .holder1 .holder2 { width: 100%; left: 0; margin-left: 0; }
  #newsslider .content ul li img { width: 100%; }
  #newsslider_area, #slide-dots { display: none; }

  #allegro-logo {
    position: relative;
    top: 0;
    left: 0;
    float: left;
    width: 119px;
    height: 89px;
    margin: 10px;
    background-size: contain;
  }
  #allegro-logo div { -webkit-mask-size: contain; mask-size: contain; }

  /* --- contact line + cart button --- */
  #part2 #work_hours {
    position: relative;
    top: 0;
    left: 0;
    width: auto;
    padding: 10px;
    overflow: hidden;
  }
  #part2 #work_hours .fblink, #part2 #work_hours .twlink,
  #part2 #work_hours .emlink, #part2 #work_hours .skypelink {
    position: static;
    display: inline-block;
    vertical-align: middle;
    margin: 5px 5px 0 0;
  }
  #part2 #goto_basket { position: relative; top: 0; right: 0; display: inline-block; margin: 0 10px 10px; }
  #basket-box { right: 10px; max-width: calc(100% - 20px); }

  #newsinfo .first, #newsinfo .second {
    float: none;
    width: auto;
    margin: 0;
    padding: 5px 10px;
    border: none;
    text-align: left;
  }

  /* --- chalkboard links strip --- */
  .part3 { height: auto; }
  #part3_body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; }
  #part3_body div, #part3_body div:first-child {
    float: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    background: none;
  }
  /* icon: shrink the chalk drawing instead of letting it crop */
  #part3_body a:first-child {
    flex: none;
    width: 45px;
    height: 45px;
    margin-right: 8px;
    padding: 0;
    background-position: center;
    background-size: contain;
  }
  /* text link: !important beats the inline width on #chalk_link3 */
  #part3_body a + a {
    float: none;
    width: auto !important;
    height: auto;
    padding: 0 0 18px;
    background-size: 25px auto;
  }

  /* --- featured products: stack header boxes, center product cards --- */
  #part4_body { padding: 0 10px; }
  #part4_body .box-left, #part4_body .box-right {
    float: none;
    margin-left: 0;
    margin-right: 0;
  }
  #part4 .front-subs .info { float: none; display: block; }
  #part4_body #featured_list { float: none; text-align: center; }
  #part4_body #featured_list .prod_body {
    float: none;
    display: inline-block;
    vertical-align: top;
    margin: 0 5px 30px;
  }
  #part4 #load_more { width: auto; }

  /* --- footer --- */
  /* each footer group becomes a full-width row: title, then links flowing inline */
  #part5_body { padding: 0 10px; }
  #part5_body > div {
    float: none;
    min-height: 0;
    margin: 0;
    padding: 12px 0;
    background: none;
    border-bottom: 1px dotted #555;
  }
  #part5_body > div:last-child { border-bottom: none; }
  #part5_body div a { display: inline-block; margin: 0 12px 6px 0; font-size: 12px; }
  #part5_body div a.google_map { display: block; }
}