/* Phones (2026-11-13). Every rule is inside the media query, so wider screens render exactly as before.
   Hooks: template/navigation.php (.uotmenu, .menutoggle; the fly-out menu script is not started on phones),
   template/footerfile.tpl (.uotside, the cart and login column). */
.menutoggle { display: none; }

@media (max-width: 760px) {
  body { overflow-x: hidden; }

  /* Header: logo scaled to the screen; the e-mail line and its 200 px box go */
  #background, #homebackground, #navbarbackground { width: auto; }
  #headerleft { display: none; }
  #headerlogo { float: none; width: auto; height: 56px; background-size: contain; margin: 4px 8px; }
  #headerright { display: none; }   /* holds only the chat script; its button is fixed to the screen corner */

  /* Navigation bar: the seven buttons in two columns */
  #fullbar, #bar { height: auto; background: #1c140c; }
  #bar { padding: 4px 0; }
  #linkmenu { float: none; position: static; padding: 0 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  #linkmenu #button { float: none; width: auto; height: auto; padding: 7px 4px; background-size: 100% 100%; }
  #linkmenu #button a { font-size: 13px; }

  /* Columns: main area first, then the cart and login; the category column sits above, folded */
  #homebackground { display: flex; flex-direction: column; }
  #homebackground > * { float: none !important; width: auto !important; min-width: 0; margin-left: 0; margin-right: 0; }
  #mainarea { order: 2; }
  .uotmenu { order: 1; }
  .uotside { order: 3; }
  .uotmenu > br, .uotside > div[style*="height:80px"] { display: none; }
  .menutoggle { display: block; width: 100%; margin: 8px 0; padding: 10px; font-size: 16px; font-weight: bold;
    color: #fff; background: #4a3420; border: 1px solid #8a6a3a; border-radius: 4px; text-align: left; }
  .menutoggle::after { content: " \25BE"; }
  .uotmenu.open .menutoggle::after { content: " \25B4"; }
  .uotmenu > :not(.menutoggle) { display: none; }
  .uotmenu.open > :not(.menutoggle):not(br) { display: block; }
  .ddsubmenustyle { display: none !important; }   /* parent category pages list their subcategories */
  .markermenu, .markermenu ul { width: auto !important; }
  #ddsidemenubar li a { padding-top: 6px; padding-bottom: 6px; }   /* taller tap targets; the left padding holds the bullet */

  /* Side boxes (menu, search, sale, cart, login): full width, framed without the 190 px images */
  #navheader, #navcartheader, #navuot, #navmiddle { width: auto; background: #120d08; border: 1px solid #5a4325; }
  #navheader, #navcartheader { height: auto; padding: 8px; border-bottom: 0; }
  #navmiddle, #navuot { padding: 6px 10px; border-top: 0; }
  #navfooter { width: auto; height: 10px; background: none; }

  /* Main area: the frame images are 569 px wide; a plain frame instead */
  #mainarea, #mainbodytop, #mainbody, #mainbodybottom { width: auto; }
  #mainbodytop, #mainbodybottom { height: 0; background: none; }
  #mainbody { padding: 6px; background: #0d0a07; border: 1px solid #5a4325; overflow-x: auto; }  /* anything still too wide scrolls in the frame, not the page */
  .uotmenu, .uotside { padding: 0 6px; }
  #adbox { zoom: 0.58; margin: 0 auto; }   /* the slideshow script sizes its frames in px: scale the 630 px box as a whole */

  /* Content */
  img { max-width: 100%; height: auto; }
  table { max-width: 100%; }
  #mainbody table[width]:not([width$="%"]) { width: auto; }   /* width="540" and the like */
  table.skillgroups { display: block; overflow-x: auto; width: auto; max-width: calc(100vw - 80px); }  /* imbuing calculator, 8 columns */
  input:not([type=checkbox]):not([type=radio]), textarea, select { max-width: 100%; box-sizing: border-box; }

  #footer { height: auto; padding-bottom: 20px; }
}