/* ==========================================================================
   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; }

/* -------------------------------------------------------------- responsive layers
   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 nothing applies
   from 1140px up, where the fixed page fits with room to spare.

   Three tiers (2026-10-24, the same as theme9star's), none of them changing markup, so
   desktop cannot move:
   - up to 1023px, STACKED (phones, tablets upright, narrow windows). The header's two
     floated halves are flattened (display: contents) and re-flowed as wrapping rows:
     currency and account links, the logo with the cart at its right, the social icons
     beside the search (as on desktop), then the menu bar. The left column is flattened
     the same way: the category blocks sit above the page as a row of chips and the
     other sideboxes follow the page content.
   - 600-1023px refines the stacked layout: wider grids, sideboxes side by side.
   - 1024-1139px, FLUID DESKTOP (tablets on their side, small laptops): the desktop
     layout itself, its fixed widths released but capped at the desktop's 1050px. It
     fits without side-scrolling, and from 1074px up (1050px plus 12px each side) it
     renders exactly as the fixed page does.
   ninestar_carousel.js reads the same 1023px boundary. */
@media (max-width: 1023px) {
  /* ------------------------------------------------------------ page shell */
  .main-width,
  .main-width2,
  #contentMainWrapper { width: auto !important; max-width: 100% !important; }

  #contentMainWrapper,
  #contentMainWrapper > tbody { display: block; width: 100%; }
  #contentMainWrapper > tbody > tr { display: flex; flex-direction: column; }
  /* the two layout cells only: tables inside the page (cart, orders, track lists) stay tables */
  #contentMainWrapper > tbody > tr > td { display: block; width: auto !important; }
  #column-center { order: 1; min-width: 0; }
  .column-center-padding { padding: 14px 12px 24px; }

  /* ---------------------------------------------------------------- header */
  #header { height: auto; }
  #header .main-width2 .wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    box-sizing: border-box;
    padding: 0 12px; /* also beats stylesheet_tm.css's 768-1000px padding-right */
  }
  #header .left-head,
  #header .right-head { display: contents; }

  /* row 1: currency and language on the left, account links on the right. The
     "Currencies:" label is white on the white header (invisible on desktop too), so it
     goes rather than push the select along. */
  #header .currencies { order: 1; float: none; padding: 8px 0 0; }
  #header .currencies form > div { font-size: 0; }
  #header .lang { order: 2; float: none; padding: 8px 0 0 8px; }
  #header .navigation { order: 3; flex: 1 1 auto; margin: 0; padding: 8px 0 0 12px; }

  /* rows end at an empty full-width item, however much room they leave */
  #header .main-width2 .wrapper::before,
  #header .main-width2 .wrapper::after { content: ""; flex: 0 0 100%; }
  #header .main-width2 .wrapper::before { order: 4; }

  /* row 2: the logo, scaled to the width, with the cart at its right as on desktop */
  /* a real basis: at 0 it would fit, 0px wide, on the end of the row break's line */
  #header .logo { order: 5; flex: 1 1 150px; min-width: 0; padding: 6px 0 0; }
  #header .logo img { display: block; width: 100%; max-width: 500px; height: auto; }
  #header .cart {
    order: 6;
    flex: 0 0 auto;
    float: none;
    height: 37px; /* the search button's height */
    margin: 6px 0 0 10px;
    padding: 0 7px 0 38px;
    background-size: auto 100%;
    font-size: 30px;
    line-height: 37px;
  }
  #header .cart a { padding: 0; }
  #header .main-width2 .wrapper::after { order: 7; }

  /* row 3: the social icons beside the search, as on desktop; on a phone the search wraps
     under them */
  #header #header_social { order: 8; float: none; display: flex; gap: 3px; margin: 12px 14px 0 0; }
  #header #header_social img { float: none; margin: 0; }
  #header .search {
    order: 9;
    flex: 1 1 200px; /* a real basis, so it wraps under the icons instead of squeezing beside them */
    min-width: 0;
    float: none;
    clear: none;
    margin: 12px 0 0;
  }
  #header .search form > div { display: flex; }
  #header .search .input1 {
    flex: 1 1 auto;
    float: none;
    width: auto;
    min-width: 0;
    height: 37px;
    box-sizing: border-box;
    padding: 0 8px;
    font-size: 16px; /* under 16px, iOS zooms the page on focus */
  }
  #header .search .input2 { flex: 0 0 auto; float: none; }

  /* row 4: the menu bar, wrapped. The separators go: on a wrapped bar they would start lines. */
  #header .menu { order: 10; flex: 0 0 100%; box-sizing: border-box; margin: 12px 0 0; padding: 4px 6px; }
  #header .menu ul { display: flex; flex-wrap: wrap; justify-content: center; }
  #header .menu ul li { display: block; padding-right: 0; }
  #header .menu ul li a { display: block; border-left: 0; padding: 0 9px; font-size: 13px; line-height: 30px; }

  /* ------------------------------------------------ left column, re-ordered */
  #contentMainWrapper #column-left,
  #contentMainWrapper #column-left > div { display: contents; }
  #column-left .box { order: 2; width: auto !important; margin: 0 12px 18px; }

  /* the category blocks as a row of chips above the page */
  #column-left #categories { order: 0; margin: 14px 12px 0; }
  #categories .box-body ul { display: flex; flex-wrap: wrap; gap: 6px; }
  #categories .box-body ul li { border-bottom: 0; }
  #categories .box-body ul li a { font-size: 14px; line-height: 17px; padding: 8px 12px 7px; }

  #mailchimpsideboxContent input[type="text"] { width: 100% !important; }

  /* ------------------------------------------------------------- content */
  #column-center img { max-width: 100%; height: auto; }

  /* the theme's 60px page headings (stylesheet_main.css, stylesheet_tm.css) */
  #column-center h1:not(#h1),
  #column-center h2.centerBoxHeading,
  #column-center #specialsListingHeading { font-size: 32px; line-height: 1.1; letter-spacing: -1.2px; }

  /* product page: cover column and details column stacked, both fluid. The template's
     inline <style> sets the fixed widths, hence the #column-center qualifier. */
  #categoryIcon { padding: 0 0 8px; }
  #categoryIcon .aligncenter,
  #categoryIcon .aligncenter a { float: none; }
  #categoryIcon .aligncenter a {
    font-size: 32px !important; /* p_147.css and p_233.css set 60px !important */
    line-height: 1.1;
    letter-spacing: -1.2px;
    padding-bottom: 0;
  }
  #column-center .music_info_left_part,
  #column-center .music_info_right_part { float: none; width: auto; min-height: 0; padding: 0; }
  #column-center #productMainImage { float: none; text-align: center; }
  #column-center #productMainImage img { float: none; }
  #column-center #productAdditionalImages { float: none; width: auto; }
  #column-center .bah { width: auto; }
  /* the artist's Like button: its iframe has no width (300px by default) and only the
     template's 82px box around it was ever meant to show */
  #column-center .bah .fb { overflow: hidden; }
  #column-center #bottom_content { float: none !important; width: auto; }
  #column-center #alsoPurchased { width: auto; margin-left: 0; }
  #column-center #productAttributes table { width: 100%; }
  /* the Tweet / Pin It / Like row: the Like box drops to its own line instead of running off */
  #column-center #socials { float: none; display: flow-root; }
  #column-center #social_facebook { width: auto; max-width: 100%; margin-left: 0; }
  #column-center #social_facebook iframe { max-width: 100%; }
  /* the template pins this row at 44px; on a narrow column the button wraps under the
     quantity box and would be clipped */
  #column-center #cartAdd { height: auto; }
  /* the player's sheet is injected by ninestar-audio.js after this one, hence #column-center */
  #column-center .fmp-container { width: auto; max-width: 480px; }
  #column-center .fmp-time-bar { width: calc(100% - 131px); } /* 345px of the 480px player; buttons and gaps take 130px */

  /* category page: the description box is a fixed 40px on desktop (one line there) */
  .tie3 { height: auto; }
  .tie3 .tie3-indent { padding: 12px 14px; }

  /* order history and address book: blocks that sit side by side on desktop, where the
     text already runs into its neighbour (a long order date; the primary address's
     -30px margin), are stacked */
  #accounthistoryBody .centerColumn fieldset .content { float: none; width: auto; margin: 0 0 10px; }
  #accounthistoryBody .centerColumn fieldset .notice { float: none; text-align: left; margin: 0 0 10px; }
  #addressbookBody .centerColumn address.back { float: none; margin: 0 0 10px; }

  /* phones on their side (601px and up) still get the cart template's phone column order,
     product first, under a header row that starts with Qty: the header row goes, and the
     price and total cells carry their own labels on phones */
  #shoppingcartBody #cartContentsDisplay:has(tr > td.cartProductDisplay:first-child) tr.tableHeading { display: none; }
  /* the cart picture is also .back, whose theme-wide 33px / -30px margins slide the title
     over it (on desktop as well) */
  #shoppingcartBody #cartContentsDisplay .cartImage { margin: 0 10px 0 0; }

  /* listing grids: two across instead of three fixed-height floats (.newgrid: new products page) */
  #column-center .centerBoxContentsProducts,
  #column-center .centerBoxContentsNew,
  #column-center .centerBoxContentsFeatured,
  #column-center .centerBoxContentsSpecials,
  #column-center .centerBoxContentsAlsoPurch,
  #column-center .newgrid {
    display: inline-block;
    float: none;
    vertical-align: top;
    width: 49% !important;
    height: auto !important;
    min-height: 0;
    box-sizing: border-box;
    padding: 0 6px; /* so neighbouring items' buttons do not read as one row */
    margin: 0 0 20px;
  }
  /* tpl_columnar_display.php ends each row of three with <br class="clearBoth">: floats
     needed it, inline blocks would start a new line there and leave every third alone */
  #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .newgrid) + br.clearBoth { display: none; }
  #column-center .ng200 { width: auto; height: auto; }
  #column-center .plart { width: auto; }
  /* Buy Now and More Info (95px each, 10px apart) stay side by side, shrinking if they must */
  #column-center .listingBuyNowButton,
  #column-center .more_info { max-width: calc(50% - 5px); height: auto; }

  /* under 16px, iOS zooms the page when a field takes focus */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select { font-size: 16px; }

  /* ------------------------------------------------------------ home page */
  .banners { padding: 16px 12px 0; box-sizing: border-box; }
  .banners #cont { margin-left: 0 !important; }
  .jquery-slider-wrapper,
  .slidez,
  .slidec { width: 100% !important; height: auto !important; }
  /* the current slide stays in flow so the box takes its height (slides/jquery.slider.css,
     linked later in the body, makes every slide absolute) */
  .jquery-slider-wrapper .jquery-slider-slide-current { position: relative; }
  .jquery-slider-wrapper .jquery-slider-slide img { display: block; width: 100%; height: auto; }
  /* the slide dots sit under the picture instead of over its lower edge */
  .jquery-slider-wrapper .jquery-slider-selectors {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 8px 0 0 !important; /* the script may set a negative margin-left inline */
  }
  .jquery-slider-wrapper .jquery-slider-selector { float: none; margin: 0; }

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

  /* the 2x2 category banners keep their composition (labels are placed in px) and are
     scaled as one block; see the width steps after this block */
  .banners .top { float: none; width: 627px; padding: 0; margin: 18px auto 0; zoom: .45; }
  .banners .right { float: none; width: auto; max-width: 362px; margin: 0 auto; }

  .popular { width: auto; padding: 26px 12px 30px; }
  .carousel-box { width: auto; margin-top: 0; }
  .carousel-box h2 { font-size: 32px; line-height: 1.1; letter-spacing: -1.2px; padding-bottom: 12px; }
  /* ninestar_carousel.js does not build the strip at this width: it scrolls by touch */
  .carousel-box .prev,
  .carousel-box .next { display: none; }
  .carousel { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
  .carousel ul { width: max-content; height: auto; }
  .carousel ul li { float: left; scroll-snap-align: start; }

  /* --------------------------------------------------------------- footer */
  #footer { margin-bottom: 0; padding: 22px 16px 24px; }
  #footer .footer-menu { margin-bottom: 12px; line-height: 28px; }
  #footer .copyright { line-height: 20px; }
}

/* the 2x2 home banners (627px wide at full size) as large as each width allows */
@media (min-width: 345px) and (max-width: 1023px) { .banners .top { zoom: .5; } }
@media (min-width: 369px) and (max-width: 1023px) { .banners .top { zoom: .55; } }
@media (min-width: 401px) and (max-width: 1023px) { .banners .top { zoom: .6; } }
@media (min-width: 495px) and (max-width: 1023px) { .banners .top { zoom: .75; } }
@media (min-width: 651px) and (max-width: 1023px) { .banners .top { zoom: 1; } }

/* ------------------------------------------------------- stacked, wider screens */
@media (min-width: 600px) and (max-width: 1023px) {
  /* the cart at its desktop size beside the full-size logo; the search keeps a
     desktop-like size, at the right of its row */
  #header .cart { height: 58px; padding: 0 9px 0 60px; background-size: auto; font-size: 54px; line-height: 54px; }
  #header .cart a { padding: 3px 0 0; }
  #header .search { flex: 0 1 380px; margin-left: auto; }

  /* three across */
  #column-center .centerBoxContentsProducts,
  #column-center .centerBoxContentsNew,
  #column-center .centerBoxContentsFeatured,
  #column-center .centerBoxContentsSpecials,
  #column-center .centerBoxContentsAlsoPurch,
  #column-center .newgrid { width: 32.5% !important; }

  /* the sideboxes after the page share rows instead of each taking the full width */
  #contentMainWrapper > tbody > tr { flex-flow: row wrap; align-items: flex-start; }
  #column-left #categories,
  #column-center { flex: 0 0 100%; }
  #column-left .box { flex: 1 1 260px; }
  #column-left #categories { flex-basis: calc(100% - 24px); }

  /* product page: cover beside the details again */
  #column-center .music_info_left_part { float: left; width: 285px; padding-right: 16px; }
  #column-center .music_info_right_part { display: flow-root; }
  #column-center #productMainImage { float: none; }
}

@media (min-width: 860px) and (max-width: 1023px) {
  #column-center .centerBoxContentsProducts,
  #column-center .centerBoxContentsNew,
  #column-center .centerBoxContentsFeatured,
  #column-center .centerBoxContentsSpecials,
  #column-center .centerBoxContentsAlsoPurch,
  #column-center .newgrid { width: 24.5% !important; }
}

/* ------------------------------------------------------------------ fluid desktop */
@media (min-width: 1024px) and (max-width: 1139px) {
  /* the page, header band included, keeps 12px of background at each side and never
     grows past the desktop's 1050px */
  .main-width,
  .main-width2 { width: min(1050px, calc(100% - 24px)) !important; }
  #column-center { width: auto !important; }
  /* a category's single slide is a plain 785px <img> (no slider is built for one), which
     would hold the table at the desktop width */
  #column-center .slidec img { max-width: 100%; height: auto; }

  /* header: the logo gives up what the 505px right half needs (482px wide at 1024) */
  #header .left-head { max-width: calc(100% - 505px); }
  #header .logo img { max-width: 100%; height: auto; }

  /* product page: the details column takes what the 295px cover column leaves */
  #column-center .music_info_right_part { float: none; width: auto; display: flow-root; }
  #column-center #bottom_content { float: none !important; width: auto; }
  #column-center #alsoPurchased { width: auto; }
  #column-center #productAttributes table { width: 100%; }
  #column-center .fmp-container { width: auto; max-width: 480px; }
  #column-center .fmp-time-bar { width: calc(100% - 131px); }

  /* home: slider, banner block and carousel strip follow the page width. Each length is
     the desktop's px over its 1050px page, so at 1050px it is the same px again. */
  .banners #cont { margin-left: calc(100% * 35 / 1050) !important; margin-right: calc(100% * 35 / 1050); }
  .jquery-slider-wrapper,
  .slidez,
  .slidec { width: 100% !important; height: auto !important; }
  .jquery-slider-wrapper .jquery-slider-slide-current { position: relative; }
  .jquery-slider-wrapper .jquery-slider-slide img { display: block; width: 100%; height: auto; }
  .banners center img { max-width: 100%; height: auto; }
  .banners .top,
  .banners .right { zoom: .95; } /* 1050px of banners in a page down to 1000px wide */
  .popular { width: auto; padding-left: calc(100% * 42 / 1050); padding-right: calc(100% * 47 / 1050); }
  .carousel-box { width: auto; }
}
@media (min-width: 1074px) and (max-width: 1139px) {
  .banners .top,
  .banners .right { zoom: 1; }
}

/* ------------------------------------------------- phones: tables as cards (2026-10-24) */
/* The cart, order and download tables need 380-480px. On a phone each row becomes a card
   and the header row goes. Cart cells are ordered by class, because on phone user agents
   the cart template prints the product cell first while the header row still starts with
   Qty. Those agents also get inline "Price:" style labels (b.hide); others get them here. */
@media (max-width: 600px) {
  #shoppingcartBody #cartContentsDisplay,
  #shoppingcartBody #cartContentsDisplay > tbody,
  #accountBody #prevOrders,
  #accountBody #prevOrders > tbody { display: block; border: 0; }

  #shoppingcartBody #cartContentsDisplay tr.tableHeading,
  #accountBody #prevOrders tr.tableHeading { display: none; }

  #shoppingcartBody #cartContentsDisplay tr {
    display: flex;
    flex-wrap: wrap; /* the narrowest phones put Total and Remove on a second line */
    align-items: center;
    gap: 10px 14px;
    padding: 12px 0;
    border-bottom: 1px solid #e1e1e1;
  }
  #shoppingcartBody #cartContentsDisplay td {
    display: block;
    width: auto;
    border: 0;
    padding: 0;
    text-align: left;
  }
  #shoppingcartBody #cartContentsDisplay .cartProductDisplay { order: 0; flex: 0 0 100%; }
  #shoppingcartBody #cartContentsDisplay .cartProductDisplay > br.clearBoth { display: none; }
  #shoppingcartBody #cartContentsDisplay .cartImage img { width: 60px; height: auto !important; margin: 0; }
  #shoppingcartBody #cartContentsDisplay .cartProdTitle { display: block; font-weight: bold; }
  #shoppingcartBody .cartAttribsList { margin-left: 70px; }
  #shoppingcartBody #cartContentsDisplay .cartQuantity { order: 1; }
  #shoppingcartBody #cartContentsDisplay .cartQuantity br { display: none; }
  #shoppingcartBody #cartContentsDisplay .cartQuantityUpdate { order: 2; }
  #shoppingcartBody #cartContentsDisplay .cartUnitDisplay { order: 3; }
  #shoppingcartBody #cartContentsDisplay .cartTotalDisplay { order: 4; }
  #shoppingcartBody #cartContentsDisplay .cartRemoveItemDisplay { order: 5; margin-left: auto; }
  #shoppingcartBody #cartContentsDisplay .cartRemoveItemDisplay input { vertical-align: middle; }
  #shoppingcartBody #cartContentsDisplay .cartUnitDisplay:not(:has(.hide))::before { content: "Price: "; font-weight: bold; }
  #shoppingcartBody #cartContentsDisplay .cartTotalDisplay:not(:has(.hide))::before { content: "Total: "; }

  #accountBody #prevOrders tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "date view" "id view" "address view" "status view" "total view";
    column-gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e1e1e1;
  }
  #accountBody #prevOrders td {
    display: block;
    border: 0;
    padding: 2px 0;
    text-align: left;
  }
  #accountBody #prevOrders .accountOrderDate { grid-area: date; }
  #accountBody #prevOrders .accountOrderId { grid-area: id; }
  #accountBody #prevOrders .accountOrderAddress { grid-area: address; }
  #accountBody #prevOrders .accountOrderStatus { grid-area: status; }
  #accountBody #prevOrders .accountOrderTotal { grid-area: total; }
  #accountBody #prevOrders .accountOrderViewButton { grid-area: view; align-self: center; }
  #accountBody #prevOrders .accountOrderAddress address { display: inline-block; vertical-align: top; }
  body#accountBody #prevOrders td.accountOrderTotal { text-align: left; } /* beats the shared .alignRight rule */
  #accountBody #prevOrders .accountOrderDate:not(:has(.hide))::before { content: "Date: "; font-weight: bold; }
  #accountBody #prevOrders .accountOrderId:not(:has(.hide))::before { content: "No.: "; font-weight: bold; }
  #accountBody #prevOrders .accountOrderAddress:not(:has(.hide))::before { content: "Ship To: "; font-weight: bold; }
  #accountBody #prevOrders .accountOrderStatus:not(:has(.hide))::before { content: "Status: "; font-weight: bold; }
  #accountBody #prevOrders .accountOrderTotal:not(:has(.hide))::before { content: "Total: "; }

  /* download links (order page and thank-you page): one card per file, button at the right */
  :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads,
  :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads > tbody { display: block; border: 0; }
  :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads tr.tableHeading { display: none; }
  :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name button" "file button" "size button" "expiry button" "count button";
    align-items: center;
    column-gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e1e1e1;
  }
  :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads td {
    display: block;
    border: 0;
    padding: 1px 0;
    text-align: left;
  }
  :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads .downloadProductNameLink { grid-area: name; font-weight: bold; }
  :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads .downloadFilename { grid-area: file; overflow-wrap: anywhere; }
  :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads .downloadFilesize { grid-area: size; }
  :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads .downloadExpiry { grid-area: expiry; }
  :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads .downloadCounts { grid-area: count; }
  :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads .downloadButton { grid-area: button; }
  :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads :is(.downloadFilesize, .downloadExpiry, .downloadCounts) {
    color: #9e9e9e;
    font-size: 12px;
  }
  :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads .downloadFilesize::before { content: "Size: "; }
  :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads .downloadExpiry::before { content: "Link expires: "; }
  :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads .downloadCounts::before { content: "Downloads left: "; }

  /* confirmation page: the delivery column goes under the billing one, not into the
     right half of the screen */
  #checkoutconfirmationBody #checkoutBillto,
  #checkoutconfirmationBody #checkoutShipto { float: none; width: auto; }
}

/* ==========================================================================
   Phone pass 2 (2026-10-24): every storefront page, audited at 320-1023px.
   Four groups follow: form controls, block layout, tap spacing and listing-grid rows,
   interactive widgets. All of it sits behind max-width: 1023px or narrower, so desktop
   (1024px and up) cannot change.
   ========================================================================== */

/* ==========================================================================
   FORM CONTROLS
   Text fields, selects, textareas, checkboxes, radios and their own labels. Many theme
   rules size fields by id (stylesheet_main.css: input#postcode, select#country, ...) or
   by body id (stylesheet_tm.css: body#loginBody fieldset input[type="text"]), hence the
   #contentMainWrapper #column-center prefix on the width rules: two ids beat them all.
   ========================================================================== */
@media (max-width: 1023px) {
  /* the header currency choice as a small grey outline globe (owner's choice, 2026-10-24):
     the select stays, invisible, over the icon, so a tap opens the phone's own picker. It
     keeps 16px text, under which iOS would zoom the page when it takes focus. The
     "Currencies:" text beside it is already font-size 0. */
  #header .currencies form > div {
    position: relative;
    width: 32px;
    height: 32px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23979797' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.5 2.5 3.8 5.5 3.8 9s-1.3 6.5-3.8 9c-2.5-2.5-3.8-5.5-3.8-9S9.5 5.5 12 3z'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
  }
  #header .currencies select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    font-size: 16px;
    cursor: pointer;
  }
  #header .currencies form > div:focus-within { outline: 2px solid #a4a87e; border-radius: 50%; }

  /* a fieldset is at least as wide as its widest field by default (min-width:
     min-content): the size=40 coupon field and the gift certificate form pushed the
     page sideways on phones */
  #column-center fieldset { min-width: 0; }

  /* no field wider than the box it sits in */
  #column-center :is(input[type="text"], input[type="email"], input[type="password"],
    input[type="search"], input[type="tel"], input[type="number"], select, textarea) {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* taller boxes in forms, for a thumb and for 16px text (the theme's 2px padding left
     them 22px tall); same border and background */
  #contentMainWrapper #column-center fieldset :is(input[type="text"], input[type="email"],
    input[type="password"], input[type="search"], input[type="tel"], input[type="number"]) {
    height: auto;
    padding: 6px 8px;
  }
  /* stylesheet_tm.css pins the login page's selects at 26px with !important */
  #contentMainWrapper #column-center fieldset select { height: auto !important; padding: 5px 4px; }

  /* advanced search: the category, price and date boxes take the full width, without
     the theme-wide .back margins (33px left, -30px right) that pushed the first two 18px
     off a phone screen; the category box no longer shrinks round its select */
  #searchDefault fieldset.floatingBox { float: none; width: auto; margin-left: 0; margin-right: 0; }
  /* price and date: the inner fieldsets kept 20px padding inside 20px padding. The
     !important beats stylesheet_main.css's fieldset { margin-bottom: 20px !important }. */
  #searchDefault fieldset fieldset.floatLeft { margin: 8px 0 0 !important; padding: 8px 10px 10px; }
  /* the keyword box is the page's main field but had the default 20-character width */
  #contentMainWrapper #searchDefault .centeredContent input[type="search"] { width: min(100%, 360px); height: auto; padding: 6px 8px; }

  /* the login page's labels are 26px tall boxes (stylesheet_tm.css); a checkbox label
     that wraps onto a second line ran into the next field */
  #loginBody #column-center fieldset label { height: auto; }

  /* the labels over the ask-a-question and review textareas were 14px tall tap targets
     right on top of the box */
  #column-center label:has(+ textarea) { display: inline-block; padding: 5px 0; }

  /* ----------------------------------------------- checkboxes and radio buttons
     13px native boxes are too small to tap. 22px, centred on the label's first line. */
  #column-center input[type="checkbox"],
  #column-center input[type="radio"] {
    width: 22px;
    height: 22px;
    margin: 0 6px 0 0;
    vertical-align: middle;
  }
  /* a box followed by its label: the label wraps beside the box, not under it */
  #column-center :is(input[type="checkbox"], input[type="radio"]) + label {
    display: inline-block;
    max-width: calc(100% - 34px);
    margin: 0;
    padding: 3px 0; /* a 24px tall tap target on one line */
    line-height: 18px;
    vertical-align: middle;
  }
  /* room before a second box on the same line (account edit: HTML / TEXT-Only) */
  #column-center :is(input[type="checkbox"], input[type="radio"]) + label:has(+ input) { margin-right: 14px; }
  /* a box after its label (create account: "Subscribe to Our Newsletter.") */
  #column-center label + input[type="checkbox"] { margin-left: 8px; }
  /* the product page's track list: the box sits in a float with 4px above it, in a 35px row */
  #column-center #productAttributes input[type="checkbox"] { margin: 0; }

  /* write a review: five radio + star image pairs ran on as one wrapping line, so a
     radio could end one line and its stars start the next. One rating per line. */
  #column-center .ratingRow {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    gap: 6px 4px;
    text-align: left;
  }
  #column-center .ratingRow input[type="radio"] + label { max-width: none; }
  #column-center .ratingRow label img { display: block; }
}

/* ------------------------------------------------- phones on their side, tablets */
@media (min-width: 601px) and (max-width: 1023px) {
  /* labels stay beside their fields here; only the boxes too small for what goes in them
     at 16px are widened: the post code and date of birth boxes are 70px
     (stylesheet_main.css) and the password boxes cut off "* (at least 7 characters)" */
  #contentMainWrapper #column-center :is(input#postcode, input#dob) { width: 12em; }
  #contentMainWrapper #column-center :is(input#password-new, input#password-confirm, input#password-current) { width: 18em; }
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 600px) {
  /* fieldsets keep their box but not the 20px side padding (stylesheet_main.css), which
     nested twice (create account) left fields 267px of a 375px screen */
  #column-center fieldset { padding: 10px 12px 14px; }

  /* label above its field instead of a 9em floated column beside it; also the plain
     labels some forms use (password forgotten, ask a question, search price and date) */
  #column-center label.inputLabel,
  #column-center fieldset > label:not(.checkboxLabel, .radioButtonLabel, input + label) {
    float: none;
    display: block;
    width: auto;
    height: auto;
    margin: 6px 0 2px;
    padding: 0;
    line-height: 24px; /* labels are tap targets: 24px tall, right above their field */
  }

  /* fields in a form take the column width (their size= attributes made them 130-175px) */
  #contentMainWrapper #column-center fieldset :is(input[type="text"], input[type="email"],
    input[type="password"], input[type="search"], input[type="tel"], input[type="number"], select, textarea) {
    width: 100%;
    margin: 0 0 4px;
    vertical-align: middle;
  }
  /* a field with a required "*" after it leaves room for the star on the same line */
  #contentMainWrapper #column-center fieldset :is(input, select):has(+ .alert) { width: calc(100% - 24px); }
  #contentMainWrapper #column-center fieldset textarea { display: block; }

  /* advanced search: the keyword box (172px) had the "Search In Product Descriptions"
     checkbox squeezed beside it, its label running into the box */
  #searchDefault .centeredContent { text-align: left; }
  #contentMainWrapper #searchDefault .centeredContent input[type="search"] { display: block; width: 100%; margin: 0 0 10px; }
  /* "Search Help [?]" sat 14px tall right above the keyword box */
  #searchDefault fieldset > .forward a { display: inline-block; padding: 5px 0; }
}

/* ==========================================================================
   BLOCK LAYOUT
   Floats, side-by-side columns and text that ran together on narrow screens.
   ========================================================================== */
@media (max-width: 1023px) {
  /* ------------------------------------------------- gift certificate product page
     p_147.css / p_233.css (linked after this sheet, hence the #column-center prefix) fix
     the description at 742px, which scrolled the page sideways and made phones render the
     whole page zoomed out. Their 250px / 244px option fields are capped at the column. */
  #column-center #productDescription { width: auto; }
  #column-center .wrapperAttribsOptions select,
  #column-center .wrapperAttribsOptions input { max-width: 100%; }

  /* -------------------------------------------- checkout: change an address
     the current address (.back: float plus 33px / -30px margins) overlapped the
     instructions beside it, and hung below them, so the new-address fieldset (which will
     not wrap around a float) was squeezed into a ~220px column at its right */
  :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) .instructions address.back {
    float: none;
    margin: 0 0 10px;
  }
  /* each form (.group, no clearfix in this theme) holds its floated Continue button: the
     new address's button hung beside the address-book list, as if it belonged to it */
  :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) .centerColumn form.group { display: flow-root; }

  /* ------------------------------------------------------- send gift certificate
     the "Your Gift Certificate Account" box floated right of the page heading and
     squeezed it to a word per line. It goes under the heading, full width. */
  #gvSendDefault { display: flex; flex-direction: column; }
  #gvSendDefault > * { min-width: 0; }
  #gvSendDefault #gvSendDefaultHeadingSend { order: -1; }
  #gvSendDefault #sendSpendWrapper { float: none; margin: 0 0 16px; }

  /* --------------------------------------------------------- product reviews list
     the cover floated left of the "no reviews" note, which was squeezed into a ~40px
     column beside it; the title (.back margins) and the two buttons, floated from
     different boxes, were staggered. Now stacked: cover, title and price, Product
     Details, the note, Write a Review. #reviews-top had no height: it now holds its floats. */
  #reviewsDefault #reviews-top { display: flow-root; }
  #reviewsDefault #productReviewsDefaultProductImage,
  #reviewsDefault #productReviewsDefaultProductImage #productMainImage,
  #reviewsDefault #reviews-middle { float: none; margin: 0 0 10px; }
  #reviewsDefault .buttonRow.forward { float: none; margin: 0 0 12px; }
  #reviewsDefault #reviews-top .buttonRow { margin: 0; }
  /* the (empty, for products with options) buy-now slot's <br> left a blank line above Product Details */
  #reviewsDefault #reviews-top > .buttonRow { padding-top: 0; }
  #reviewsDefault #reviews-top > .buttonRow > br { display: none; }

  /* write a review: the price heading ran under the floated cover, its text squeezed to
     the cover's right; cover, price and buttons stack instead */
  #reviewsWrite #reviewWriteMainImage { float: none; margin: 0 0 10px; }
  #reviewsWrite #reviewsWritePrice { text-align: left; }

  /* ------------------------------------------------------------------- specials
     #productListing's -12px top margin (stylesheet.css) tucks it under the category
     pages' sort bar margin; here the bar has none, so "There are no products to list"
     ran into the green bar (on desktop too, which this file leaves alone) */
  #column-center #filter-wrapper + #productListing { margin-top: 10px; }

  /* ------------------------------------------------------------------ artist page
     the Websites line is built of floats in a box with no height, so it ran into the
     "Other Albums Featuring ..." heading that follows */
  #column-center #artist-links { display: flow-root; margin-bottom: 14px; }

  /* ----------------------------------------------------------- order confirmation
     the comments box (.group, with no clearfix in this theme) let its EDIT button hang
     into the Products heading, where it stacked above the cart's own EDIT button.
     The box holds its float, and each heading sits on one line with its EDIT. */
  #checkoutconfirmationBody #order-comments { display: flow-root; }
  #checkoutconfirmationBody #checkoutConfirmDefaultHeadingComments,
  #checkoutconfirmationBody #checkoutConfirmDefaultHeadingCart { float: left; }
  #checkoutconfirmationBody #order-comments > div:not(.buttonRow) { clear: left; }

  /* ------------------------------------------------------ split-page links (lists)
     reviews list and other core pages: the page numbers in nav.pagination are list items
     with no style here, so 1 / 2 / Next stacked one per line. One wrapping row. */
  #column-center nav.pagination ul.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
  }
  #column-center nav.pagination ul.pagination li { margin: 0; padding: 0; }
}

@media (max-width: 600px) {
  /* order details (history): the delivery and billing blocks float side by side, and
     .back's theme-wide 33px / -30px margins slide the delivery text into the billing
     column ("FREE SHIPPING! (No Delivery Charge)" ran into "Check/Money Order"). Stacked. */
  #accounthistoryinfoBody #myAccountShipInfo,
  #accounthistoryinfoBody #myAccountPaymentInfo { float: none; width: auto; margin: 0 0 14px; }

  /* listing pages: "Displaying 1 to 18 (of 28 Products)" (float left, plus .back's 33px /
     -30px margins) collided with the page links floated right of it. The count, then the
     links on their own line. */
  #column-center .navSplitPagesResult { float: none; margin: 0 0 8px; }
  #column-center .navSplitPagesLinks { float: none; margin: 0 0 12px; }
  /* single-page lists print both boxes empty; without floats their margins would show */
  #column-center .navSplitPagesResult:not(:has(*)),
  #column-center .navSplitPagesLinks:not(:has(*)) { display: none; }
}

/* ==========================================================================
   TAP SPACING AND LISTING-GRID ROWS
   Link lists as 24px bands; each grid row's Buy Now / More Info buttons on one line.
   ========================================================================== */
@media (max-width: 1023px) {
  /* ------------------------------------------------- tap spacing, text lists */
  /* site map (also on the 404 pages), EZ-page contents and the account page: one link
     per 15-18px row, so a finger lands on the neighbour. Each link becomes a 24px band. */
  #siteMapList li a,
  #navEZPagesTOC ul.list li a,
  #accountLinksWrapper ul.list li a {
    display: inline-block;
    padding: 4px 0;
    line-height: 16px;
  }

  /* ask a question: the Message label sits right on top of the textarea */
  #contactUsForm label[for="enquiry"] { display: inline-block; line-height: 24px; }

  /* FAQ: the closed answers' links still take up layout space in Chrome (the closed
     <details> hides them without removing their boxes), and the last ones lie over the
     footer menu's first row. A closed answer takes no space at all instead. */
  details.faq-item:not([open]) > .faq-answer { display: none; }

  /* ------------------------------------------------------- listing grids */
  /* Items in one row are equal in height: their parent becomes a wrapping flex row
     (the item widths per tier still come from stylesheet_zz_9star.css). A <br> cannot
     break a flex line, so the parent's ::after (a clearfix on some of them) becomes the
     line break between what comes before the items and the items, and its ::before the
     break after them: `order` puts them there, without changing the order of the content.
     Everything else in the parent keeps a line of its own (the page count and page links:
     see the 601px block below). A <br> between two such lines still makes its empty line. */
  #column-center :has(> :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .newgrid)) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    column-gap: .28em; /* the word space the inline blocks had between them */
  }
  /* the artist page's album grid has no white space between its items */
  #column-center #artist_other_products { column-gap: 0; }
  #column-center :has(> :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .newgrid))::after,
  #column-center :has(> :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .newgrid))::before {
    content: "";
    display: block;
    flex: 0 0 100%;
    height: 0;
    order: 1;
  }
  #column-center :has(> :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .newgrid))::before { order: 3; }
  #column-center :has(> :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .newgrid)) > * { flex: 0 0 100%; }
  #column-center :has(> :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .newgrid)) > :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .newgrid) { flex: 0 0 auto; order: 2; }
  #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .newgrid) ~ :not(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .newgrid) { order: 4; }

  /* Inside an item with Buy Now / More Info (the links after the title), the buttons go
     to a last row at the bottom: rows 1-12 hold the picture, title and artist, row 13
     takes the spare height, row 14 the buttons. Buy Now and More Info keep their order,
     their 10px gap (a column of its own) and their equal shrinking on narrow items
     (newgrid's Buy Now has no class, so it never shrank and More Info dropped under it). The <br>s that spaced the lines are
     replaced by the same 15px. */
  #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .newgrid):has(> h3 ~ a) {
    display: grid;
    grid-template-columns: minmax(0, 95px) 10px minmax(0, 95px) 1fr;
    grid-template-rows: repeat(12, max-content) 1fr;
    align-content: stretch;
  }
  #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .newgrid):has(> h3 ~ a) > * { grid-column: 1 / -1; }
  #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .newgrid):has(> h3 ~ a) > br { display: none; }
  #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .newgrid):has(> h3 ~ a) > .ng200:has(+ br) { margin-bottom: 15px; }
  #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .newgrid) > h3 ~ a {
    grid-row: 14;
    grid-column: 1;
    margin: 15px 0;
    line-height: 0;
  }
  #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .newgrid) > h3 ~ a + a { grid-column: 3; }
  #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .newgrid) > h3 ~ a > img { max-width: 100%; height: auto; }
  #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .newgrid) > h3 ~ a > img.more_info { margin-left: 0; }
}

@media (min-width: 601px) and (max-width: 1023px) {
  /* the page count and page links side by side, as their floats were. The <br>s around
     them made no line beside the floats, and a <br> cannot start a flex line: the one
     after the links goes, and the one before them (new products page) becomes 15px more
     top margin (stylesheet.css gives the count 15px and the links 0). */
  #column-center :has(> :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .newgrid)) > .navSplitPagesLinks + br,
  #column-center :has(> :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .newgrid)) > br:has(+ .navSplitPagesResult) { display: none; }
  #column-center :has(> :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .newgrid)) > br + .navSplitPagesResult { margin-top: 30px; }
  #column-center :has(> :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .newgrid)) > br + .navSplitPagesResult + .navSplitPagesLinks { margin-top: 15px; }
  #column-center :has(> :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .newgrid)) > .navSplitPagesResult { flex: 0 1 auto; align-self: flex-start; }
  #column-center :has(> :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .newgrid)) > .navSplitPagesLinks { flex: 0 1 auto; align-self: flex-start; margin-left: auto; }
}

/* ==========================================================================
   INTERACTIVE WIDGETS
   Product thumbnails, and larger invisible tap areas on the audio player's small controls.
   ========================================================================== */
@media (max-width: 1023px) {
  /* ------------------------------------------------------ product thumbnails
     The extra-image strip is a fixed 65px per picture (stylesheet.css, !important;
     p_*.css sizes the <img>, hence the #column-center qualifier). In the 285px cover
     column of the 600-1023px tier the fourth picture missed by 4px and sat alone on a
     second row. Four now share the strip's width, never growing past their 65px. */
  #column-center #productAdditionalImages .additionalImages {
    width: calc((100% - 15px) / 4) !important;
    max-width: 65px;
  }
  #column-center #productAdditionalImages img { width: 100%; height: auto; }

  /* ------------------------------------------------------------ audio player
     The skin's controls are desktop-sized: previous/next 22px, the mute button 20x14px
     and a seek bar 11px tall, a few px from each other. Each gets a larger invisible
     hit area (a transparent ::after, which takes the tap for its element), so the look
     and the spacing stay exactly as on desktop. */
  #column-center .fmp-previous-button::after,
  #column-center .fmp-next-button::after {
    content: "";
    position: absolute;
    inset: -6px -1px; /* 24x34: no further sideways, the play button is 3px away */
  }
  #column-center .fmp-sound-control .fmp-volume-button { position: relative; }
  #column-center .fmp-sound-control .fmp-volume-button::after {
    content: "";
    position: absolute;
    inset: -8px -4px; /* 28x30 */
  }
  /* the seek bar is already position: relative; its click handler reads only clientX */
  #column-center .fmp-time-bar::after {
    content: "";
    position: absolute;
    inset: -9px 0;
  }
}

/* ------------------------------------------------------------- remaining pages */
@media (max-width: 1023px) {
  /* the Bicentennial EZ page holds an e-mail newsletter whose table is pinned at 800px
     inline (width and min-width), so from 601px it pushed the page sideways; fixed table
     layout keeps its 800px-wide pictures from widening the cells again */
  #column-center table.main-table { width: 100% !important; min-width: 0 !important; table-layout: fixed; }
  /* its 500px and 580px inner columns (inline widths) are capped at the page */
  #column-center table.main-table table.container { width: auto !important; max-width: 100%; }

  /* artist page: the album section headings (h5/h6, 30px) were as big as the page title */
  #column-center :is(#artist_primary_title, #artist_other_title) { font-size: 24px; line-height: 1.15; }

  /* specials: the sort bar's "Sort by:" label was a 14px tall tap target right beside its select */
  #specialsBody #column-center label[for="disp-order-sorter"] { display: inline-block; line-height: 24px; }
}
@media (max-width: 767px) {
  /* the newsletter's picture and text columns (400px + 270px tables, class m-w100) sit
     side by side; the e-mail's own phone rule that stacks them is not on the page */
  #column-center table.main-table table.m-w100 { float: none; width: 100% !important; }
}

/* ==========================================================================
   Phone pass 3 (2026-10-24): polish per page group, each looked at by eye at 320, 375,
   414, 667x375, 844x390, 768 and 1000px. Page groups scope every selector by their pages'
   body ids; the page chrome (header, menu, chips, sideboxes, footer) by #header, #footer,
   #column-left. All of it sits behind max-width: 1023px or narrower.
   ========================================================================== */

/* Wave 2: account pages (my account, edit, password, newsletters, notifications, address
   book, order history and order info, gift certificates, coupon, order status, unsubscribe).
   Phone/tablet only; nothing here reaches 1024px. */
@media (max-width: 1023px) {
  /* Delete Address Book Entry: the "Are you sure ...?" question is the whole point of the
     page but is 11px light grey (#a3a3a3, about 2.5:1 on white), hard to read on a phone.
     Same element on new/edit is the "* Required information" note (.alert.forward): left as is. */
  #addressbookprocessBody .centerColumn > div.alert:not(.forward) {
    font-size: 13px;
    line-height: 1.4;
    color: #6b6e6f;
    margin-bottom: 8px;
  }
}

@media (max-width: 600px) {
  /* Send Gift Certificate: the three fields leave 24px for their "*" (shared phone rule)
     but the message box has no star and ran 24px further right: line its edge up. */
  #gvsendBody #contentMainWrapper #column-center fieldset textarea { width: calc(100% - 24px); }
}

/* ==========================================================================
   Phone pass, wave 2 (2026-10-24): cart, checkout, login and account-creation pages.
   Every rule sits behind max-width: 1023px or narrower, so desktop cannot change.
   ========================================================================== */
@media (max-width: 1023px) {
  /* ------------------------------------------------------------------ cart
     "[help (?)]" floats right of the page heading, so the centred heading wrapped round
     it and sat off centre, its first line squeezed. The link goes on its own line above,
     still at the right, and becomes a 24px tap target (it was 15px tall). */
  #shoppingcartBody #shoppingCartDefault > .forward { float: none; text-align: right; }
  #shoppingcartBody #shoppingCartDefault > .forward a { display: inline-block; padding: 5px 0; }

  /* empty cart: the banner's warning icon (77px, at the right edge) sits under the text,
     which runs into it ("EMPTY" crossed by the icon) on a narrow screen; the box was also
     pinned at 35px, so wrapped text would spill out of the orange. Room is kept for the
     icon, the box grows with the text, and the icon stays centred in it as on desktop. */
  #shoppingcartBody #cartEmptyText {
    height: auto;
    min-height: 35px;
    padding: 24px 82px 22px 20px;
    background-position: right center;
    line-height: 1.25;
  }

  /* ----------------------------------------------------- messages with an icon
     error and warning lines start with a 30px icon inline: a message that wraps ran its
     second line under the icon. The text now keeps to its own column beside it. */
  :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
    #checkoutpaymentaddressBody, #checkoutconfirmationBody, #loginBody, #createaccountBody,
    #passwordforgottenBody, #passwordresetBody, #timeoutBody)
    :is(.messageStackError, .messageStackWarning, .messageStackSuccess, .messageStackCaution):has(> img:first-child) {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
    #checkoutpaymentaddressBody, #checkoutconfirmationBody, #loginBody, #createaccountBody,
    #passwordforgottenBody, #passwordresetBody, #timeoutBody)
    :is(.messageStackError, .messageStackWarning, .messageStackSuccess, .messageStackCaution) > img:first-child { flex: 0 0 auto; }

  /* ------------------------------------------ change address: address book list
     each entry's radio and name are two floats with the theme-wide .back margins (33px
     left, -30px right): the 22px radio hung 33px in and below the line of its name, and
     the address under it started further left than both. Radio and name share one
     centred line at the left, the address lines up under the name, and the entries are
     spaced so each reads as one choice. */
  :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) :is(.moduleRow, .moduleRowSelected) {
    display: flex;
    align-items: center;
    margin-top: 12px;
  }
  :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) :is(.moduleRow, .moduleRowSelected) > .back { float: none; margin: 0; }
  :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) :is(.moduleRow, .moduleRowSelected) label {
    display: inline-block;
    padding: 3px 0; /* the name is the radio's label: a 24px tap target */
  }
  :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) :is(.moduleRow, .moduleRowSelected) + br.clearBoth { display: none; }
  :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) :is(.moduleRow, .moduleRowSelected) + br.clearBoth + address { padding: 2px 0 0 28px; }
}

@media (min-width: 601px) and (max-width: 1023px) {
  /* tablets get the cart's desktop columns under the Qty / Product / Price / Total
     header row, but the template also prints its phone labels for them: "Price: $9.99"
     under a "Price" heading. The labels go where the header row shows. */
  #shoppingcartBody #cartContentsDisplay:has(tr > td.cartQuantity:first-child) :is(.cartUnitDisplay, .cartTotalDisplay) > b.hide { display: none; }
}

@media (max-width: 600px) {
  /* ------------------------------------------------------- order totals
     payment and confirmation pages: each line is two right floats, amount then title.
     A title too long for the line beside its amount ("FREE SHIPPING! (No Delivery
     Charge):" at 320px) dropped below it, leaving "$0.00" on a line of its own above a
     title with no amount. Each line is now a row: the title wraps in its own space, the
     amount stays beside it, both still at the right as on desktop. */
  :is(#checkoutpaymentBody #checkoutOrderTotals, #checkoutconfirmationBody #orderTotals) > div {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
  }
  :is(#checkoutpaymentBody #checkoutOrderTotals, #checkoutconfirmationBody #orderTotals) > div > .lineTitle { float: none; order: 0; flex: 0 1 auto; min-width: 0; }
  :is(#checkoutpaymentBody #checkoutOrderTotals, #checkoutconfirmationBody #orderTotals) > div > .totalBox { float: none; order: 1; flex: 0 0 auto; }
  /* the <br> after each line cleared the floats; with none left it would add an empty line */
  :is(#checkoutpaymentBody #checkoutOrderTotals, #checkoutconfirmationBody #orderTotals) > br.clearBoth { display: none; }

  /* --------------------------------------- delivery and billing address rows
     the Change Your Address button (about 200px) floats right of the address, which on
     the narrowest phones was squeezed until "5240 Parkmoor Dr" broke over two lines.
     The address keeps the width it needs; when the button does not fit beside it, the
     button goes under it, at the left. */
  #checkoutshippingBody #checkoutShipto,
  #checkoutpaymentBody #checkoutBillto {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 10px;
  }
  #checkoutshippingBody #checkoutShipto > address,
  #checkoutpaymentBody #checkoutBillto > address { flex: 1 0 auto; order: 0; }
  #checkoutshippingBody #checkoutShipto > .buttonRow,
  #checkoutpaymentBody #checkoutBillto > .buttonRow { float: none; order: 1; }
}

/* ==========================================================================
   Phone pass, wave 2 (2026-10-24): the page chrome on every page (header, menu bar,
   category chips, sideboxes, footer). Additions to stylesheet_zz_9star.css's stacked
   tier; everything sits behind max-width: 1023px, so desktop cannot change.
   ========================================================================== */
@media (max-width: 1023px) {
  /* account links (logged in: Log Out, My Account, Shopping Cart, Checkout). They are
     separated by white "&nbsp; > &nbsp;" text, so on a narrow row the line broke inside
     the run and left "Checkout" alone on a ragged second line, the links 14px tall. The
     invisible separators collapse to nothing; the links wrap as whole words at the right,
     24px tall for a thumb. */
  #header .navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    font-size: 0;
    line-height: 24px;
    padding: 6px 0 0; /* the links' own margins keep them off the language flag */
  }
  #header .navigation a { margin-left: 14px; font-size: 12px; line-height: 24px; }

  /* footer menu: the links are spaced with runs of &nbsp;, so every wrapped line began
     with a stray indent ("  FAQ", "  LOGIN"). Same spacing as whole-word flex items,
     every line starting flush at the left. */
  #footer .footer-menu { display: flex; flex-wrap: wrap; font-size: 0; }
  /* as flex items the links are as tall as their own line-height: the menu's 28px rows
     kept for each link, so they stay 28px tap targets. 16px apart, as the &nbsp; runs were */
  #footer .footer-menu a { margin-right: 16px; font-size: 14px; line-height: 28px; }
}

/* the menu bar on the narrowest phones: seven links in a 284px bar left "Login" alone on
   a third row. A little less padding fits them in two rows. */
@media (max-width: 359px) {
  #header .menu { padding-left: 2px; padding-right: 2px; }
  #header .menu ul li a { padding: 0 6px; }
}

@media (min-width: 600px) and (max-width: 1023px) {
  /* the search kept a 380px basis, which with the social icons needs 590px: at 600-620px
     it dropped to a row of its own, alone at the right under the icons. It may shrink
     to 300px now and stays on the icons' row. */
  #header .search { flex: 1 1 300px; max-width: 380px; }

  /* sideboxes span the full width here; their 90% selects ran 500-900px wide, far from
     the desktop's small dropdown */
  #column-left .box .sideBoxContent select { max-width: 360px; }
}

/* Wave 2: text pages (EZ pages, about, FAQ, contact, legal, site map, 404).
   Phone/tablet only; nothing here reaches 1024px. */
@media (max-width: 1023px) {
  /* Body copy is 12px with a 15px line height: on a phone that is a dense, hard-to-read
     block. Raise it to a comfortable reading size; headings keep their own sizes. The
     Bicentennial newsletter sets inline sizes, which still win. */
  #pageBody .centerColumn, #aboutusBody .centerColumn, #contactusBody .centerColumn,
  #page2Body .centerColumn, #page3Body .centerColumn, #page4Body .centerColumn,
  #privacyBody .centerColumn, #conditionsBody .centerColumn, #shippinginfoBody .centerColumn,
  #accessibilityBody .centerColumn, #cookieusageBody .centerColumn,
  #sitemapBody .centerColumn, #pagenotfoundBody .centerColumn {
    font-size: 14px;
    line-height: 1.5;
  }
  #pageBody .centerColumn p, #aboutusBody .centerColumn p, #contactusBody .centerColumn p,
  #page2Body .centerColumn p, #page3Body .centerColumn p, #page4Body .centerColumn p,
  #privacyBody .centerColumn p, #conditionsBody .centerColumn p, #shippinginfoBody .centerColumn p,
  #accessibilityBody .centerColumn p, #cookieusageBody .centerColumn p,
  #sitemapBody .centerColumn p, #pagenotfoundBody .centerColumn p {
    margin-bottom: 0.8em;
  }

  /* FAQ questions are 15px-tall tap rows packed together: give each a real tap height. */
  #pageBody .faq-item > summary {
    padding: 7px 0;
  }

  /* Site map and 404 link lists: one-line links 15px apart are fiddly to tap; space
     them out and trim the deep nested indent that wastes a third of a 320px screen. */
  #sitemapBody .centerColumn li, #pagenotfoundBody .centerColumn li {
    padding: 3px 0;
  }
  #sitemapBody .centerColumn ul ul, #pagenotfoundBody .centerColumn ul ul {
    padding-left: 18px;
  }

  /* EZ-page table of contents: same tap spacing for its links. */
  #pageBody #navEZPagesTOC li {
    padding: 3px 0;
  }
}

/* ==========================================================================
   WAVE 2: LISTING PAGES (home, category / genre lists, search, new / all /
   featured / specials / brands). Phone and tablet widths only.
   The home page, the category pages and the artist page all use #indexBody:
   home rules are scoped by .banners / .slidez, category rules by
   #indexProductList without #artist_holder (the artist page has both).
   ========================================================================== */
@media (max-width: 1023px) {
  /* ------------------------------------------------------- slider (home, category)
     the dots sit under the picture here (stylesheet_zz_9star.css), on the white page:
     the current dot is the sprite's white square and disappeared, so the row could not
     show which slide is on. The row gets a dark ground, as the dots have on the
     picture on desktop. Each dot keeps its 16px picture inside a 24px tap box. */
  #indexBody .jquery-slider-wrapper .jquery-slider-selectors {
    gap: 0;
    padding: 2px 0;
    background: #5a6c60; /* the green-grey of the NEWEST RELEASES banner: white and dark dots both show */
  }
  #indexBody .jquery-slider-wrapper .jquery-slider-selector {
    width: 16px;
    height: 16px;
    padding: 4px;
    background-origin: content-box;
    background-clip: content-box;
  }
  /* the timer bar is pinned to the box's bottom edge, which is now the dot row's:
     it drew a black line across the dots' lower edge. Back on the picture's lower edge,
     as on desktop (row: 24px dots + 2px padding twice, 8px margin above). */
  #indexBody .jquery-slider-wrapper .jquery-slider-timer { bottom: 36px; }

  /* ------------------------------------------------------------ home page */
  /* two <br>s (28px) plus the block's margin left the widest gap on the page between
     NEWEST RELEASES and the 2x2 banners; one <br> goes */
  #indexBody .banners > center + br + br { display: none; }
  /* the three right-hand banners are 312-320px pictures left-aligned in a 362px box,
     so the stacked column sat off centre under the centred 2x2 block */
  #indexBody .banners .right { text-align: center; }
  #indexBody .banners .right #bannerSix { margin-left: 0; }
}

/* the 2x2 block and the right-hand banners side by side again, as on desktop, both
   scaled by the same factor ((627 + 24 + 362) * zoom <= width - 24px). Below 900px
   the right-hand banners' small print would get too small, so they stay stacked. */
@media (min-width: 900px) and (max-width: 1023px) {
  #indexBody .banners { display: flow-root; }
  #indexBody .banners .top { float: left; margin: 18px 24px 0 0; zoom: .86; }
  #indexBody .banners .right { float: left; width: 362px; max-width: none; margin: 18px 0 0; text-align: left; zoom: .86; }
}
@media (min-width: 960px) and (max-width: 1023px) {
  #indexBody .banners .top,
  #indexBody .banners .right { zoom: .92; }
}
@media (min-width: 1000px) and (max-width: 1023px) {
  #indexBody .banners .top,
  #indexBody .banners .right { zoom: .96; }
}

@media (max-width: 1023px) {
  /* ---------------------------------------------------- category page lists
     #productListing's -12px top margin (stylesheet.css) tucks it under the bar's
     desktop margin; here "Displaying 1 to 18" (phones) or the page links (wider)
     touched the green filter bar. The <br> between them gives the 15px. */
  #indexBody #indexProductList:not(:has(#artist_holder)) .tie2 ~ #productListing { margin-top: 0; }
  /* genre lists have two filter selects; stacked, they touched each other */
  #indexBody #indexProductList:not(:has(#artist_holder)) .tie2 form[name="filter"] select { margin: 3px 6px 3px 0; }

  /* ----------------------------------------------------------- search results
     "Filter by:" was a full-width line of its own with its select under it, right on
     top of the green Sort by bar. It becomes one row lined up with "Sort by:" (same
     20px + 3px indent, bold label), with room before the bar. */
  #searchresultBody #filter-wrapper > form[name="filter"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 0 0 0 20px;
    margin: 0 0 8px;
  }
  #searchresultBody #filter-wrapper > form[name="filter"] label {
    float: none;
    width: auto;
    margin: 0 0 0 3px;
    padding: 0;
    font-weight: bold;
  }

  /* ----------------------------------------------------- featured categories
     "There are currently no featured categories." is printed in a grid item, so the
     two-across grid squeezed the sentence into half the column */
  #featuredcategoriesBody .centerBoxContentsFeatured.w-100 { width: 100% !important; } /* the grid width is !important */
}

/* ==========================================================================
   Phone pass, wave 2 (2026-10-24): product pages (music, video, audio book and
   document products share #productmusicinfoBody; the gift certificate is
   #productfreeshippinginfoBody) and the artist page (#indexBody, scoped by its own
   #artist-links). Every rule sits behind max-width: 1023px or narrower, so desktop
   (1024px and up) cannot change. The template's inline <style> blocks come later in
   the page than this sheet, hence the body id in front of every selector.
   ========================================================================== */

@media (max-width: 1023px) {
  /* track list: the name, the price box and the checkbox are three floats in one cell.
     A long name ("Instant Download Of Complete MP3 Album", "09. The Sun of the World of
     Love") left no room for the two right-hand floats, so the price and checkbox dropped
     under it, out of line with every other row. On audio books the hidden (.hhh) price
     and checkbox of free tracks did the same, doubling those rows' height. The name now
     wraps in its own column, beside them: 125px = price 55 + 15, checkbox 22 + 20,
     the name's 5px margin and a little air. */
  #productmusicinfoBody #productAttributes .namez {
    max-width: calc(100% - 125px);
    padding-bottom: 4px; /* a wrapped second line kept off the row's bottom border */
    text-align: left;
  }
  /* a track sold only with the album has its price and checkbox hidden (.hhh, visibility:
     hidden, still taking their room): its name may use the whole row */
  #productmusicinfoBody #productAttributes .namez:has(~ .prizy.hhh) { max-width: calc(100% - 10px); }
  #productmusicinfoBody #productAttributes .namez ~ .hhh { display: none; }

  /* "Other Products you might enjoy:" is an 18px heading on desktop; the shared 32px
     heading rule made it bigger than the product's own 24px title */
  #productmusicinfoBody #alsoPurchased h2.centerBoxHeading,
  #productfreeshippinginfoBody #alsoPurchased h2.centerBoxHeading {
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -1px;
  }
}

/* --------------------------------------------- tablets and phones on their side */
@media (min-width: 600px) and (max-width: 1023px) {
  /* the four "Other Products" sat three in a row with the fourth alone below; four
     across, as on desktop (stylesheet_zz_9star.css's !important beats the inline 25%) */
  #productmusicinfoBody #alsoPurchased .centerBoxContentsAlsoPurch,
  #productfreeshippinginfoBody #alsoPurchased .centerBoxContentsAlsoPurch { width: 24.5% !important; }
}

/* ------------------------------------------------- phones: cover above the details */
@media (max-width: 599px) {
  /* the cover kept its desktop 10px right margin and sat 5px left of centre; the
     thumbnail strip's bordered box ran the full width with the pictures at its left.
     The strip now matches the framed cover (281px) and sits under it. */
  #productmusicinfoBody #productMainImage,
  #productfreeshippinginfoBody #productMainImage { margin-right: 0; }
  #productmusicinfoBody #productAdditionalImages {
    box-sizing: border-box;
    width: 281px;
    max-width: 100%;
    margin: -1px auto 10px;
  }

  /* the description kept its desktop 285px column (template <style>, and an hr with
     width="285px"), leaving a quarter of the screen empty beside it. It clears the
     artist row's floats: the Tweet box (.tw, 26px) hangs 2px below that 28px row, and
     a fluid #wrap (overflow: hidden) would squeeze in beside it, 90px wide. */
  #productmusicinfoBody #wrap { width: auto; clear: both; }
  #productmusicinfoBody #wrap > hr { width: auto; }

  /* "Click to Read More": a 15px tap target, directly on top of the product title that
     follows it in the stacked layout */
  #productmusicinfoBody #read-more { margin: 10px 0 22px; }
  #productmusicinfoBody #read-more a { padding: 5px 0; }

  /* gift certificate: the title sat on the cover's lower edge */
  #productfreeshippinginfoBody .music_info_right_part #h1 { margin-top: 14px; }

  /* Prev / Listing / Next: with "Product 95/164" in the same line, Next wrapped alone
     under Prev at 320px. The counter takes its own line above the three buttons. */
  #productmusicinfoBody .navNextPrevWrapper .navNextPrevCounter { display: block; padding: 0 0 8px; }

  /* Write a Review / Read the Reviews: floated right, they stacked flush on top of each
     other at 320px and touched the "Other Products" heading. One centred, wrapping row
     under the centred Prev / Next row, with a gap. The first link's inline 6px right
     margin would push the pair off centre, hence !important. */
  #productmusicinfoBody #productReviewLink {
    float: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 6px;
    margin: 0 0 18px;
  }
  #productmusicinfoBody #productReviewLink > a { margin-right: 0 !important; line-height: 0; }
  /* the template prints a second, empty #productReviewLink after the review count */
  #productmusicinfoBody #productReviewLink:not(:has(a)) { display: none; }
  /* the bottom block kept the template's -5px left margin, 5px left of everything else */
  #productmusicinfoBody #bottom_content { margin-left: 0; }

  /* artist page: the two website links were 15px tall and 5px apart */
  #indexBody #artist-links a { margin-right: 14px; padding: 5px 0; }
}

/* Wave 2 phone polish: review pages, ask-a-question, cart-info popup. Phone/tablet only. */
@media (max-width: 1023px) {
  /* Ask a Question: product image sat flush against the bottom of the h1. */
  #askaquestionBody #column-center h1 { margin-bottom: 8px; }

  /* Visitors Cart / Members Cart popup: the 60px h1 filled the whole first screen on phones. */
  #infoShoppingCart h1 { font-size: 26px; line-height: 1.2; letter-spacing: normal; } /* theme -4px tracking is sized for 60px; it mashes letters at 26px */
}

@media (max-width: 400px) {
  /* All Reviews list: the 150px floated cover left room for one word ("A") beside it,
     so the title broke off below the image. Smaller cover keeps the title beside it. */
  #reviewsBody .smallProductImage img { width: 100px; height: auto; }
  #reviewsBody .smallProductImage { width: auto; }
}

/* ==========================================================================
   Phone pass 4 (2026-10-24): an independent design review's fixes that keep the look:
   the product page's buy box above the description, listing buttons at full size on
   narrow phones, the home rhythm, running text and journey headings.
   ========================================================================== */

/* ==========================================================================
   Wave 3: listing-grid buttons, home banner rhythm, artist page filter bar.
   Phone and tablet only (every rule is inside a max-width query); loads after
   stylesheet_zz_9star.css and builds on its "TAP SPACING AND LISTING-GRID ROWS" grid.
   ========================================================================== */

@media (max-width: 419px) {
  /* ------------------------------------------------ listing-grid buttons
     Two 95px buttons and their 10px gap do not fit a 2-up item under 420px, so BUY NOW
     and MORE INFO were squeezed to 62x21 (320) or 75x25 (375): their white text fell to
     about 7px and they looked disabled. They keep their natural 95x32 and stack instead,
     left-aligned under the title: Buy Now in row 14, More Info in row 15, so each row's
     buttons still line up (row 13 still takes the spare height). */
  :is(#indexBody, #searchresultBody, #advancedsearchresultBody, #productsnewBody, #productsallBody,
    #featuredproductsBody, #specialsBody, #shoppingcartBody) #column-center
    :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .newgrid):has(> h3 ~ a) {
    grid-template-columns: 95px minmax(0, 1fr);
  }
  :is(#indexBody, #searchresultBody, #advancedsearchresultBody, #productsnewBody, #productsallBody,
    #featuredproductsBody, #specialsBody, #shoppingcartBody) #column-center
    :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .newgrid) > h3 ~ a {
    margin: 15px 0 0;
  }
  :is(#indexBody, #searchresultBody, #advancedsearchresultBody, #productsnewBody, #productsallBody,
    #featuredproductsBody, #specialsBody, #shoppingcartBody) #column-center
    :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .newgrid) > h3 ~ a + a {
    grid-row: 15;
    grid-column: 1;
    margin: 8px 0 15px;
  }
  /* the shared sheet caps each button at half the item (calc(50% - 5px)) */
  :is(#indexBody, #searchresultBody, #advancedsearchresultBody, #productsnewBody, #productsallBody,
    #featuredproductsBody, #specialsBody, #shoppingcartBody) #column-center
    :is(.centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured,
    .centerBoxContentsSpecials, .newgrid) > h3 ~ a > img {
    width: 95px;
    max-width: none;
    height: auto;
  }
}

@media (max-width: 899px) {
  /* ------------------------------------------------------- home banners
     Stacked (under 900px), the promo column (artists, newsletter, wholesale, shipping)
     started right at the bottom of the 2x2 category tiles (0px) while NEWEST RELEASES sat
     about 40px above them. The last <br> above the tiles goes and the promo column gets
     24px above it, so both gaps read as about 24px. */
  #indexBody .banners > center + br { display: none; }
  #indexBody .banners .right { margin-top: 24px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  /* unscaled here, the tiles' 18px top margin plus the white above their pictures
     still left 38px; 4px brings it to the same 24px */
  #indexBody .banners .top { margin-top: 4px; }
}

@media (max-width: 1023px) {
  /* ------------------------------------------------ artist page filter bar
     On artist pages the template's own <style> hides the filter form
     (`.tie2-indent form {display:none}`), leaving an empty 30px olive bar between
     "Other Albums ..." and "Albums by ...". The bar goes only when it shows nothing:
     on an artist page with nothing but the form in it, or anywhere with nothing in it.
     Category and genre pages keep their filter bar. */
  #indexBody #indexProductList:has(#artist_holder) .tie2:not(:has(.tie2-indent > :not(form))),
  #indexBody #indexProductList .tie2:not(:has(.tie2-indent > *)) { display: none; }
}

/* ==========================================================================
   Phone pass, wave 3 (2026-10-24): product page buy box, category heading and
   share row. Music, video, audio book and document products share
   #productmusicinfoBody. Every rule sits behind max-width: 599px, the one-column
   phone layout, so tablets (600px and up) and desktop cannot change. The
   template's inline <style> blocks come later in the page than this sheet, hence
   the body id in front of every selector.
   ========================================================================== */

@media (max-width: 599px) {
  /* ------------------------------------------------------------- buy box order
     The title, price and Add to Cart sat about two screens down, under the cover,
     rating, credits and the whole description. The cover stays first (the store's
     look); the buy box (#cnt) now follows the cover and thumbnails, then the rest of
     the left column, then #bottom_content.
     The left column is unwrapped (display: contents) so its children can be ordered
     beside #cnt. It holds a bare "Average Rating:" text node, which becomes an
     anonymous flex item that cannot be ordered or sized: it keeps order 0, and the
     container wraps in rows so that text, the <strong> score and the stars image
     share one line as before instead of splitting into three. Every other child
     takes a full row. */
  #productmusicinfoBody .column-center-padding {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  #productmusicinfoBody .music_info_left_part { display: contents; }
  #productmusicinfoBody .column-center-padding > *,
  #productmusicinfoBody .music_info_left_part > * { flex: 1 1 100%; min-width: 0; }
  #productmusicinfoBody #categoryIcon { order: -4; }
  #productmusicinfoBody #productMainImage { order: -3; }
  /* the thumbnail strip keeps its 281px framed width, centred by its auto margins */
  #productmusicinfoBody #productAdditionalImages { order: -2; flex: 0 0 auto; }
  #productmusicinfoBody #cnt { order: -1; margin-bottom: 14px; }
  /* As a flex item #cnt no longer lets the last block's 2.4px (0.2em) bottom margin
     collapse out of it, so its height gained a fraction. The template's "Click to
     Read More" script sizes the description from #cnt's height and then tests the
     description's height with ==, so a fractional height that layout rounds broke
     the link. Dropping that margin keeps #cnt's height what it was. */
  #productmusicinfoBody #cnt #mediaManager { margin-bottom: 0; }

  /* the rating line: the <br>s around it would each take a row in the flex box; the
     text node's trailing space is trimmed there, so the score gets a margin instead;
     the stars float right on desktop, auto margin does it here */
  #productmusicinfoBody .music_info_left_part > br { display: none; }
  #productmusicinfoBody .music_info_left_part > strong { flex: 0 0 auto; margin-left: 4px; }
  #productmusicinfoBody .music_info_left_part > img { flex: 0 0 auto; margin-left: auto; }

  /* ----------------------------------------------------------- category heading
     The category name (32px, bold, centred) was the biggest heading on the page,
     above the product's own 24px title. p_147.css and p_233.css set 60px
     !important, hence !important. */
  #productmusicinfoBody #categoryIcon .aligncenter a {
    font-size: 19px !important;
    line-height: 1.25;
    letter-spacing: -0.3px;
  }
  #productmusicinfoBody #categoryIcon { padding-bottom: 4px; }

  /* ------------------------------------------------------------------ share row
     Pinterest "Save" sat 100px in, after the X button's fixed 90px slot; the Like
     box below kept a fixed 25px row although Facebook now draws its plugin 0px wide
     and tall; then two <br>s added 28px of nothing. One row, sized by its buttons.
     The Like box keeps its place and grows if Facebook ever draws it (up to its
     desktop 25px); stylesheet.css forces its width with !important. The hr under
     the row has an inline -7px top margin, hence the bottom padding. */
  #productmusicinfoBody #socials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
    padding: 6px 0 13px;
  }
  #productmusicinfoBody #social_twitter { width: auto; margin-top: 0; line-height: 0; }
  #productmusicinfoBody #pin { margin: 0; line-height: 0; }
  #productmusicinfoBody #social_facebook {
    flex: 1 1 200px;
    width: auto !important;
    height: auto;
    max-height: 25px;
    margin: 0;
    padding-left: 0;
    line-height: 0;
  }
  #productmusicinfoBody #cnt > br { display: none; }
}

/* ==========================================================================
   WAVE 3: TYPE AND CART TIDY (phones only; nothing here reaches 1024px).
   Loads after stylesheet_zz_9star.css, so equal-specificity rules here win.
   ========================================================================== */

@media (max-width: 600px) {
  /* Cart: the lone refresh icon under BACK TO SHOPPING / GO TO CHECKOUT sat on a row of
     its own. Every cart row already has the same button: both are unnamed image submits
     of #shoppingCartForm (action=update_product), so either one sends every quantity
     and remove tick. Hidden only while at least one row button is enabled (rows with a
     fixed quantity get a disabled one, and then this is the only working submit). */
  #shoppingcartBody #shoppingCartForm:has(.cartQuantityUpdate input[type="image"]:not([disabled])) > .buttonRow.back:has(> input[type="image"]) {
    display: none;
  }

  /* Running text is 12px with a 15px line height: dense and hard to read on a phone.
     Same reading size as the text pages (14px / 1.5, wave 2). Labels, tables, totals,
     prices, headings and form fields keep their sizes. */

  /* product page: release facts, description and credits share one block; the read-more
     clamp measures its height after the CSS applies, so it still opens fully */
  #productmusicinfoBody #productDescription { font-size: 14px; line-height: 1.5; }

  /* artist page bio (the page's inline <style> sets #wrap line-height 1.4em) */
  #indexBody .ninestar-artist #wrap { font-size: 14px; line-height: 1.5; }

  /* cart and checkout explanations */
  #shoppingcartBody #cartInstructionsDisplay,
  #checkoutshippingBody #column-center form > .important,
  #checkoutpaymentBody #column-center .floatingBox.important,
  #checkoutpaymentBody #column-center p.important,
  #checkoutpaymentBody #column-center fieldset:has(> #conditions) > div,
  #checkoutconfirmationBody #column-center .important { font-size: 14px; line-height: 1.5; }

  /* checkout step 2: coupon and gift certificate instructions are bare text inside their
     fieldset; the legend, label and balance line keep the 12px they had (the label also
     keeps the 24px tap height set in stylesheet_zz_9star.css) */
  #checkoutpaymentBody #column-center fieldset:has(> .gvBal) { font-size: 14px; line-height: 1.5; }
  #checkoutpaymentBody #column-center fieldset:has(> .gvBal) > :is(legend, label, .gvBal) { font-size: 12px; }
  #checkoutpaymentBody #column-center fieldset:has(> .gvBal) > :is(legend, .gvBal) { line-height: 15px; }

  /* login, create account and account pages */
  :is(#loginBody, #createaccountBody) #column-center .information,
  #passwordforgottenBody #passwordForgottenMainContent,
  #addressbookBody #column-center .instructions,
  #accountnotificationsBody #column-center .notice { font-size: 14px; line-height: 1.5; }

  /* gift certificate pages */
  #gvsendBody #gvSendDefaultMainContent,
  #gvsendBody #column-center .advisory,
  #gvredeemBody #column-center .content,
  #gvfaqBody #gvFaqDefaultContent { font-size: 14px; line-height: 1.5; }
}

@media (max-width: 479px) {
  /* Journey page headings: the shared 32px rule (#column-center h1:not(#h1)) wraps
     "Your Shopping Cart Contents" and "Step 1 of 3 - Delivery Information" onto two heavy
     lines. Smaller on narrow phones; weight, colour and alignment unchanged. Category
     and product headings are not in these pages. */
  :is(#shoppingcartBody, #checkoutshippingBody, #checkoutpaymentBody, #checkoutconfirmationBody,
      #checkoutshippingaddressBody, #checkoutpaymentaddressBody, #checkoutsuccessBody,
      #accountBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody,
      #accountnotificationsBody, #accounthistoryBody, #accounthistoryinfoBody,
      #addressbookBody, #addressbookprocessBody, #loginBody, #createaccountBody,
      #createaccountsuccessBody) #column-center h1:not(#h1) {
    font-size: 26px;
    line-height: 1.15;
  }
}