/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ mobile overrides
   Loaded after styles.css. Only active under 768px, so the desktop layout
   (fixed-width, pixel-positioned) is untouched.
   Converts the absolutely-positioned header/footer and the floated
   left-nav / content / right-sidebar columns into a stacked, fluid flow. */

/* hidden outside the media query so the hamburger never shows on desktop */
#mobile-nav-toggle{ display:none; }

@media (max-width: 768px) {

  body{ overflow-x:hidden; }

  #body-left{ display:none; }

  #page{ width:100%; max-width:100%; }

  img{ max-width:100%; height:auto; }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ header */

  #header{
    height:auto;
    position:static;
    background-image:none;
    background-color:#26262f; /* dark navy that bg_top_left.gif provided at a fixed height on desktop; needed as a solid fill since the header now grows taller than that image when the menu opens */
    padding-top:14px; /* padding (not the row's margin) creates real space above the logo, since margin-top would collapse through to the viewport edge */
    padding-bottom:10px;
  }
  #header .call,
  #search-box{
    position:static !important;
    left:auto !important;
    top:auto !important;
    width:auto !important;
    height:auto !important;
    display:block;
    margin:8px 10px;
  }
  #header-nav .link{
    position:static !important;
    left:auto !important;
    display:block;
    width:100% !important;
    height:auto !important;
    box-sizing:border-box;
    margin:0;
    padding:12px 4px;
    border-bottom:1px solid rgba(255,255,255,0.1);
    /* the label is a background-image; desktop pins it "left top" to match a header-nav
       bar that's exactly as tall as the label (16px). Rows are taller here for a comfortable
       tap target, so top-alignment now reads as the label floating with dead space below it. */
    background-position:left center !important;
  }
  /* these <img> are invisible 1px.gif spacers sized via width/height HTML attributes to
     match each label's background-image (the real label). The global `img{height:auto}`
     rule recomputes height from the gif's true 1x1 intrinsic ratio instead of the
     36x15-ish attributes, blowing the row up to a near-square. Pin height back down. */
  #header-nav .link img{ max-width:none; height:15px !important; }
  #header-nav .link a{ display:inline-block; }
  #header-nav .link:last-child{ border-bottom:none; }

  /* logo + hamburger sit on one row: logo left, button right */
  .mobile-header-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:8px 10px;
  }
  #header .logo{
    position:static !important;
    left:auto !important;
    top:auto !important;
    width:auto !important;
    height:auto !important;
    margin:0;
  }

  /* hamburger menu: #header-nav starts collapsed, toggled by the button added in header.inc.php */
  #mobile-nav-toggle{
    display:block;
    margin:0;
    flex-shrink:0;
    padding:8px 14px;
    background-color:rgba(255,255,255,0.1);
    color:#d4d4d4;
    border:1px solid rgba(255,255,255,0.3);
    border-radius:4px;
    font-size:16px;
    line-height:1;
  }
  #mobile-nav-toggle span{ font-size:13px; font-weight:bold; vertical-align:middle; }
  #header-nav{
    position:static !important;
    left:auto !important;
    top:auto !important;
    width:auto !important;
    height:auto !important;
    display:none;
    margin:8px 10px;
    padding:8px 0px;
    border-top:1px solid rgba(255,255,255,0.2);
  }
  #header-nav.mobile-nav-open{ display:block; }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ left-nav / content / sidebar */

  #left, #lft-nav, #column-right,
  #content, #content.content-product{
    width:100% !important;
    float:none;
    box-sizing:border-box;
  }
  #content .content-header,
  #content.content-product .content-header{
    width:100% !important;
    height:auto !important;
    background-image:none !important;
    padding:10px 0;
  }

  /* product.php has its own inline <style> block (#product, .left, .right, .box) */
  #product{ width:100% !important; box-sizing:border-box; }
  #product .left, #product .right{ width:100% !important; float:none !important; }
  #product .photo, #product .prices{ width:100% !important; box-sizing:border-box; }
  #product .box{ width:100% !important; box-sizing:border-box; }
  #product table{ width:100% !important; }

  /* include/news.inc.php (the blog RSS box in the left column) has its own inline
     <style> block too: #news{width:525px} — same fixed-width-forces-page-scroll bug. */
  #news{ width:100% !important; box-sizing:border-box; }

  #content .content-title,
  #content .content-link{ position:static; }
  #content .content-link{ display:none; }
  #content .content-wrapper{ padding:15px; }

  #right{ width:100% !important; float:none; }
  #right .right-wrapper{ padding:15px; }

  /* contact-us.html uses a separate #box-left/#box-right split (styles.css), not #content/#right */
  #box-contact .box-contact-wrapper{ padding:15px; box-sizing:border-box; }
  #box-left, #box-right{ width:100% !important; float:none !important; }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ footer */

  #footer{ height:auto; padding-bottom:15px; }
  #footer .copy{ position:static; padding:10px 15px 0px 15px; }
  #footer-nav{ position:static; padding:10px 15px 0px 15px; }

  #footer .fnav1, #footer .fnav2, #footer .fnav3, #footer .fnav4{
    position:static;
    width:auto;
    padding:10px 15px 0px 15px;
  }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ homepage slideshow (include/home.inc.php has its
     own inline <style> block, output later in the document than this file, so it needs !important to lose) */

  #home{
    width:100% !important;
    height:auto !important;
    background-image:none !important;
    position:static !important;
  }
  #home #slideshow{
    position:static !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    max-width:390px;
    height:280px !important;
    margin:0 auto;
  }
  #home #caption{
    position:static !important;
    left:auto !important;
    top:auto !important;
    width:auto !important;
    padding:10px;
  }
  #home #categories{
    position:static !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    height:auto !important;
    box-sizing:border-box;
    padding:10px;
  }
  #home .link-more,
  #home .link-shoei,
  #home .link-hjc{
    position:static !important;
    left:auto !important;
    top:auto !important;
    display:inline-block;
    margin:8px 10px 0px 0px;
  }
  /* link-shoei/link-hjc are 1px.gif spacers too (see #header-nav .link img above for why) */
  #home .link-shoei img, #home .link-hjc img{ max-width:none; height:35px !important; }
  /* gallery.css sets div.navigation{width:570px} (that's #thumbs) and floats the 5
     105px-wide <li> thumbnails inside it — wider than any phone screen. Cap the
     strip to the viewport and let it scroll horizontally within its own row
     instead of pushing the whole page wider. */
  #thumbs{
    position:static !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  #thumbs ul.thumbs{
    display:flex;
    width:max-content;
  }
  #thumbs ul.thumbs li{ float:none; }
  /* include/categories.inc.php has its own nested inline <style> block */
  #categories-home{ position:static !important; left:auto !important; top:auto !important; }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ cart table */

  #cartTable{ width:100%; }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ videos.php / include/most_popular_helmets.inc.php
     (identical img+text side-by-side pattern, different id prefix each) */

  #videos-list .item, #helmest-list .item{ height:auto !important; }
  #videos-list .item-img, #videos-list .item-txt,
  #helmest-list .item-img, #helmest-list .item-txt{
    width:100% !important;
    float:none !important;
  }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ include/list_of_categories.inc.php
     (model-list page: category list + brand logo side by side) */

  #categories-holder{ width:100% !important; }
  #categories-holder #categories,
  #categories-holder #brand-logo{
    width:100% !important;
    float:none !important;
  }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ include/ads_tz_content.inc.php / ads_tz_horizontal.inc.php
     (.item itself is only 250px — narrower than any phone, wraps fine via float — only
     the flat 220-650px divider line needs capping) */

  #content-ads .line-black{ width:100% !important; }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ include/header-videos.inc.php (/videos.html)
     Its inline <style> sets #content{width:700px !important}, output in <body> — after
     this file in the cascade — so at equal specificity it would normally win over the
     #content rule above despite both being !important. Beat it on specificity instead. */

  body #content{ width:100% !important; }
  body #content .content-header{
    width:100% !important;
    background-image:none !important;
  }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ include/watch.inc.php (embedded on /videos.html?id=…)
     Facebook like-button iframe has an inline width:450px */

  #watch iframe{ max-width:100% !important; }

  /* include/videos.inc.php's #tabs is effectively dead (the YouTube feed loop never
     executes — $sxml has no ->entry), but cap it in case that ever gets fixed */
  #tabs, #tabs .tab, #tabs .tab-movie{ max-width:100% !important; }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ include/form_newsletter.inc.php (#right sidebar) */

  #frm-newsletter{ max-width:100%; box-sizing:border-box; }
  #frm-newsletter .input{ max-width:100%; box-sizing:border-box; }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ include/form_contact.inc.php (/contact-us.html) */

  #contact-form .box{ width:100% !important; float:none !important; }
  #contact-form #company-lead-form table,
  #contact-form #company-lead-form table tr,
  #contact-form #company-lead-form table tr td{
    display:block;
    width:auto !important;
  }
  #contact-form #company-lead-form table tr td input,
  #contact-form #company-lead-form table tr td select,
  #contact-form #company-lead-form table tr td textarea{
    width:100% !important;
    box-sizing:border-box;
  }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ cart/showPay.php, cart/showShipping.php, cart/thankYou.php
     (checkout). Old label/input-per-column table forms with per-input inline widths
     (220-475px) and 2-3 tables all sharing id="cart_form" — stack everything and let
     inputs fill their row. */

  #shipping_container table,
  #shipping_container table tr,
  #shipping_container table tr td{
    display:block;
    width:auto !important;
  }
  #shipping_container input,
  #shipping_container select{
    width:100% !important;
    max-width:100%;
    box-sizing:border-box;
  }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ads: never let a fixed-width unit force page-wide horizontal scroll */

  .adsbygoogle,
  div[style*="width:728px"],
  div[style*="width:300px"]{
    max-width:100% !important;
  }
}