/* ==========================================================================
   theme9star — ADDITIONS ONLY.

   This file once carried ~86 hand-written rules approximating theme489's design.
   That approach failed and is gone: theme489's own stylesheets are now ported into
   this directory, and because Zen Cart sorts stylesheets by filename they reproduce
   v1's exact cascade for free.

   This sheet sorts LAST, so anything left here beats the ported CSS on every tie.
   It must therefore only ever contain rules the original has no counterpart for —
   never a restatement of something theme489 already styles.
   ========================================================================== */

/* --------------------------------------------------------------- sidebox selects
   v1 put `style="width: 90%; margin: auto;"` inline on the Artists and Music Genres
   <select> elements (theme489 sideboxes), so there is no stylesheet rule to port.
   Without a width they shrink to their content and stop reading as dropdowns.
   Applied here as one rule rather than inline, so it also covers the core Music
   Genres box, which theme9star does not override. */
.sideBoxContent select,
#artistsContent select,
#musicgenresContent select {
  width: 90%;
  margin: auto;
  display: block;
}

/* ------------------------------------------------------------------- FAQ page
   The 27 FAQ entries were migrated out of the SQL-injectable FAQ add-on into
   EZ-Page 21 and render as <details>/<summary>. v1 had no such markup. */
details.faq-item { border-bottom: 1px solid #e1e1e1; padding: 10px 0; }
details.faq-item > summary { cursor: pointer; font-weight: bold; color: #363636; }
details.faq-item[open] > summary { color: #e8a900; }
details.faq-item .faq-answer { padding: 8px 0 4px 14px; }

/* --------------------------------------------------------------- media player
   Companions to theme489's jquery.fancyMusicPlayer-white.css, which does the
   skinning. Only states the original has no rule for. */
.fmp-sr-status {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px;
}
.fmp-playlist li.fmp-unavailable-track { cursor: default; opacity: .5; }
.fmp-playlist li.fmp-selected-track > span { font-weight: bold; }

/* --------------------------------------------------------------- mobile layer
   v1 has NO responsive behaviour: it ships a <table id="contentMainWrapper"> with a
   hardcoded centre cell and a fixed ~1050px page. Desktop fidelity is the target and
   must not move, so every rule below sits behind a max-width query and cannot apply
   at desktop widths. */
@media (max-width: 900px) {
  .main-width,
  .main-width2,
  #contentMainWrapper { width: auto !important; max-width: 100% !important; }

  #contentMainWrapper,
  #contentMainWrapper > tbody,
  #contentMainWrapper > tbody > tr { display: block; width: 100%; }
  #contentMainWrapper td { display: block; width: auto !important; }

  #column-left { padding: 0 12px 12px !important; }

  .banners img,
  .top img,
  .right img,
  .darkbox-canvas img { max-width: 100%; height: auto; }

  /* Touch targets on the category colour bar. */
  .box-body ul li a { padding: 12px 10px; }
}