/* Phones (2026-11-13). Every rule is inside the media query, so wider screens render exactly as before.
   Hooks in include/design.php: .sitehead (the header), .headspacer, table.sitelayout, td.sitemenu, .menutoggle. */
.menutoggle, .subtoggle { display: none; }

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

  /* Header: in the page flow (a fixed header would cover a third of the screen), one column. */
  .sitehead { position: static !important; height: auto !important; }
  .headspacer { display: none; }
  #floattop, .floathead { height: auto; }
  #floattopinside { width: auto; padding: 4px 8px; overflow: hidden; }
  #floattoplogo, #floattoplinks, #floattopnavlinks, .floatheadright-right, .topminicart { float: none !important; padding: 3px 0 !important; }
  #floattoplogo { display: inline-block; margin-right: 8px; }
  #floattoplogo a { font-size: 22px; }
  #floattoplinks, #floattopnavlinks { display: inline; line-height: 1.8; }
  #floattoplinks a, #floattopnavlinks a { padding-right: 8px !important; }
  /* the login form and the store search: one row each */
  .sitehead form, .sitehead .form-group { float: none !important; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0 !important; }
  .sitehead form > .form-group { flex: 1 1 100%; min-width: 0; }
  .sitehead .form-group > .topminicart { flex: 0 0 100%; }   /* the header never closes the search row, so the cart sits in it */
  .sitehead .form-group > div:has(> script) { flex: 0 0 0; width: 0; }
  .sitehead .form-group > div { float: none !important; padding: 0 !important; }
  .sitehead .form-group > div:first-child:not(:has(select)) { display: none; }    /* the "Store Search:" label */
  .sitehead .form-group > div:has(select) { display: flex; gap: 6px; flex: 1 1 100%; min-width: 0; }
  .sitehead .form-control { width: auto !important; flex: 1 1 0; min-width: 0; }
  .sitehead select.form-control { flex: 0 0 104px; }
  .floatheadright-right { padding-top: 4px !important; }
  .sitehead .floathead form { padding-top: 6px !important; }
  .topminicart { padding: 6px 0 8px !important; }
  .topcartcontent { height: auto; }
  .topminicart .btn { width: 100%; }

  /* Page: menu column above the content, both full width. */
  table.sitelayout, table.sitelayout > tbody, table.sitelayout > tbody > tr, table.sitelayout > tbody > tr > td {
    display: block; width: auto !important; padding: 0 !important;
  }
  table.sitelayout > tbody > tr > td { padding: 0 8px !important; }
  .menutoggle { display: block; width: 100%; margin: 8px 0; padding: 10px; font-size: 16px; font-weight: bold;
    color: #fff; background: #2d4a5e; border: 0; border-radius: 4px; text-align: left; }
  .menutoggle::after { content: " \25BE"; }
  .sitemenu.open .menutoggle::after { content: " \25B4"; }
  .sitemenu > :not(.menutoggle) { display: none; }
  .sitemenu.open > :not(.menutoggle):not(br) { display: block; }
  .sitemenu.open > .menutoggle + #storesearchit, .sitemenu.open > .menutoggle + #storesearchit + form { display: none; }  /* repeats the header search */
  #cssmenu, #cssmenu ul, #cssmenu li { width: auto !important; float: none !important; }
  #cssmenu > ul > li > a { display: block; padding: 9px 50px 9px 8px; }
  /* subcategories: in place, opened by the row's button (the desktop fly-out would open off-screen) */
  #cssmenu .has-sub:after { display: none; }
  #cssmenu ul ul { position: static; visibility: visible; display: none; border: 0; box-shadow: none; border-radius: 0; }
  #cssmenu li.open > ul { display: block; }
  #cssmenu ul ul li a { display: block; padding: 8px 8px 8px 26px; }
  .subtoggle { display: block; position: absolute; top: 0; right: 0; width: 48px; height: 42px; border: 0;
    border-left: 1px solid #ccc; background: transparent; font-size: 18px; color: #2d4a5e; }
  .subtoggle::before { content: "\25BE"; }
  li.open > .subtoggle::before { content: "\25B4"; }

  /* Content: category product boxes one per row, full width */
  #catrow { float: none; width: auto; height: auto; min-height: 150px; margin: 8px 0; }
  .homebox { width: auto !important; }
  table.skillgroups { display: block; overflow-x: auto; width: auto; max-width: calc(100vw - 80px); }  /* imbuing calculator: 8 columns, inside a list and two padded cells */
  table.contactform, table.contactform tbody, table.contactform tr, table.contactform td { display: block; padding: 2px 0; }
  table.contactform input[type=text], table.contactform textarea { width: 100%; }
  #sc6i6a .psmtc_6i6a { position: static !important; display: block; margin: 8px 0; }  /* cart's chat link: in the page, not on top of the chat button */

  /* Content */
  img, iframe, video { max-width: 100%; height: auto; }
  table { max-width: 100%; }
  input:not([type=checkbox]):not([type=radio]), textarea, select { max-width: 100%; box-sizing: border-box; }
  .sitelayout .row, .sitelayout .navbar-form { margin-left: 0; margin-right: 0; }

  /* Footer */
  #footermiddle { width: auto; padding: 0 10px; }
  #footersection { width: 50%; margin-bottom: 14px; }
}