/* Seats the 2009 store stylesheets inside the current playibone.com layout.
 *
 * store.css and store_custom.css beside this file are the originals, unedited,
 * so that they stay recognisable as the 2009 files and can be diffed against
 * them. Everything needed to reconcile them with the site as it is now lives
 * here instead, and nowhere else.
 *
 * There are only two such things. */

/* store.css sizes the one-column content area at 755px. The site's #container
 * is 725px (main.css), so the store's content hung 30px past the chrome on
 * every page - the store looked wider than the rest of the site, which is the
 * difference you see when you flip between playibone.com and playibone.com/store.
 *
 * 570px of product listing plus the shipping panel still fits: the panel is a
 * shrink-to-fit float and measures 133px. */
body.one-col #content { width: 725px; }

/* main.css renamed this nav item's class from "store" to "shop" at some point
 * after 2009, so the current file styles #container.shop li.shop and no longer
 * matches the store's own markup. The rule below is the 2009 one restored - it
 * greys out the nav item for the section you are already in, the same as Home
 * and About do on the site.
 *
 * Restored here rather than by renaming the markup to "shop", because the item
 * says Store, the URL is /store, and the site's own footer calls it the store. */
#container.store li.store a { color: #999999; }

/* The 2009 "empty cart" control was link_to with :method => :delete, which
 * Rails 2 turned into a JavaScript-driven form. Rails 8 has no equivalent that
 * works without Turbo, and this layout does not load Turbo, so it is a
 * button_to now. These rules put the button back to looking like the small
 * plain link it was - the markup had to change, the appearance did not. */
#clear_cart_link form { display: inline; }
#clear_cart_link button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: #6666FF;
  cursor: pointer;
  text-decoration: underline;
}
#clear_cart_link button:hover { color: #CCCCCC; }

/* --- readability fixes -------------------------------------------------
 *
 * store.css is Spree 0.9's stock stylesheet and was written for a light
 * page. iBone's is black, and store_custom.css never overrode these three,
 * so they were as good as invisible in 2009 too. They are not preserved as
 * they were, deliberately: the cart subtotal was #222222 on black. */

/* The cart subtotal. Same grey as .price.selling elsewhere in the cart. */
#subtotal h3 { color: #CCCCCC; }

/* Flash messages came out as a pale blue panel with pale blue text - Spree
 * 0.9's light-theme colours dropped onto a black page. Same shapes, same
 * border radius, colours that belong to this site. */
.flash.notice {
  background: #1B1B1B;
  color: #CCCCCC;
  border: 1px solid #4649AF;
}
.flash.errors {
  background: #2A1414;
  color: #EEBBBB;
  border: 1px solid #AA4444;
}

/* button_to renders <input type="submit">, not <button>, so the earlier rule
 * for the empty-cart link matched nothing and it kept the browser's default
 * chrome - a large pale button in the middle of the dark page. */
#clear_cart_link input[type="submit"],
#clear_cart_link button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: #6666FF;
  cursor: pointer;
  text-decoration: underline;
}
#clear_cart_link input[type="submit"]:hover,
#clear_cart_link button:hover { color: #CCCCCC; }

/* The country/zip inputs inside the checkout block, so they match the rest of
 * the store's fields rather than showing as white boxes. */
.paypal_form select, .paypal_form input[type="text"] {
  background-color: #333333;
  color: #CCCCCC;
  border: 1px solid #444444;
}

/* --- the foot of the cart ----------------------------------------------
 *
 * store_custom.css positions this area with absolute pixel offsets:
 *   .paypal_form  { top: -32px; float: right; width: 145px }
 *   .update_button{ right: 153px }
 * The 153px is there to step the Update button left of the 145px PayPal
 * column, and the -32px pulls that column up beside it. Both numbers were
 * measured against the 2009 page, and they no longer land where they were
 * meant to: the Update button sat on top of the country field (781-838
 * against the column's 789-934), the select collapsed to 26px, and the zip
 * field overhung its column by 27px.
 *
 * Same arrangement, expressed as a column instead of as offsets - subtotal,
 * then Update, then country, zip and the checkout button beneath it, all
 * stacked at the right. Nothing overlaps and nothing needs re-measuring if
 * the text changes length. */

#checkout_links { float: right; clear: right; margin-bottom: 8px; }
.update_button { position: static; right: auto; margin: 0; }

.paypal_form {
  position: static;
  top: auto;
  float: right;
  clear: right;
  width: 200px;
  text-align: right;
}
.paypal_form p { margin: 0 0 6px; }
.paypal_form select { width: 100%; max-width: 200px; }
.paypal_form input[type="text"] { width: 100%; max-width: 200px; box-sizing: border-box; }
.paypal_form input[type="image"] { margin-top: 4px; }

/* The shipping note belongs under the whole thing, not tucked beside the
 * floated column where it was overlapping the Update button. */
#content > p:last-of-type { clear: both; padding-top: 12px; }