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

/* Fine print - the note about international orders under the shipping panel
 * and under the checkout button. The sidebar it sits in is already 11px
 * #666666, so this steps down one more but lifts the grey slightly: at 10px
 * on black, #666 is at about the point where it stops being readable rather
 * than just quiet. */
.fine_print {
  font-size: 10px;
  line-height: 1.4;
  color: #777777;
  margin-top: 6px;
}
.fine_print a { color: #6666FF; }
.fine_print a:hover { color: #CCCCCC; }

/* In the cart the note sits under the checkout button in a 200px column that
 * is right-aligned; left-align just this so it reads as a paragraph. */
.paypal_form .fine_print { text-align: left; }

/* .product-listing-about is a shrink-to-fit float in the original, which works
 * only while everything inside it is short: the panel measured 133px and there
 * are 155px beside the 570px product listing. Adding the international note
 * broke that - its text is 255px on one line, so the panel grew to 255px, no
 * longer fitted, and dropped below the products.
 *
 * An explicit width, so the column keeps its place whatever goes in it. 145px
 * leaves a 10px gutter in the 155px available. */
.product-listing-about { width: 145px; }

/* --- cart indicator ----------------------------------------------------
 * store.css hangs a 32px trolley icon off this link. It is Spree 0.9's own
 * artwork and does not belong on this site's typography-only navigation. */
ul#nav-bar li.cart-indicator a,
ul#nav-bar li.cart-indicator a.full {
  background: none;
  padding-right: 0;
}

/* --- empty cart --------------------------------------------------------
 * The earlier rules for this did not take: a <button> keeps appearance:auto,
 * and while that is set the engine paints its native face - measured
 * background-color rgb(239,239,239) - regardless of the background declared
 * here. Turning appearance off is what actually removes the chrome. */
#clear_cart_link input[type="submit"],
#clear_cart_link button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  background-color: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #6666FF;
  cursor: pointer;
  text-decoration: underline;
}

/* --- raise the checkout ------------------------------------------------
 * The button was landing at y=713 in a 720px viewport - below the fold, with
 * the banner and the cart table above it. The column had five stacked rows;
 * these fold two of them together and tighten the gaps, which lifts the
 * button clear of the fold without moving anything out of its order. */
#subtotal h3 { margin-bottom: 0; }
#checkout_links { clear: none; margin: 0 0 0 14px; }
.paypal_form { clear: right; margin-top: 10px; }
.paypal_form p { margin: 0 0 4px; }
.paypal_form p.zip_line input[type="text"] { width: 80px; max-width: 80px; }

/* --- the right-hand column ---------------------------------------------
 * The foot of the cart was three separate right floats with different widths
 * and their own offsets, plus a paragraph after all of them that fell into
 * the bottom corner on its own. One column instead: subtotal, the note that
 * qualifies it, Update, then the destination, postcode and checkout button.
 * A single width and a single alignment, so the parts line up with each
 * other and read top to bottom. */
#subtotal,
#checkout_links,
.paypal_form {
  float: right;
  clear: right;
  width: 270px;
  text-align: right;
}
#subtotal { margin: 0; }
#subtotal h3 { margin: 0 0 2px; }
#subtotal .summary_note {
  margin: 0;
  font-size: 11px;
  color: #777777;
}
#checkout_links { margin: 8px 0 0; }
.paypal_form { margin-top: 14px; }
.paypal_form .fine_print { text-align: right; }

/* Continue shopping and empty cart stay on the left, clear of that column. */
.cart_actions { margin: 0 0 4px; }

/* --- empty cart, for the last time -------------------------------------
 * store.css carries this:
 *
 *   button, a.button, input.button {
 *     background: url(".../bg-button.png") left center repeat-x #EFEFEF !important;
 *   }
 *
 * with !important, so no amount of specificity in a normal declaration can
 * beat it - which is why the three previous attempts at this all failed while
 * looking like they should have worked. appearance:none took, because nothing
 * competes for it, and the pale button face stayed regardless.
 *
 * !important against !important is decided by specificity, and
 * #clear_cart_link button (1,0,1) beats button (0,0,1). This is the one place
 * in this file that needs it, and it needs it because the sheet it is
 * overriding is a vendored file being kept unedited. */
#clear_cart_link button,
#clear_cart_link input[type="submit"] {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font: inherit !important;
  color: #6666FF !important;
  text-shadow: none !important;
  box-shadow: none !important;
  line-height: inherit !important;
  display: inline !important;
  cursor: pointer;
  text-decoration: underline;
}
#clear_cart_link button:hover,
#clear_cart_link input[type="submit"]:hover {
  background: none !important;
  color: #CCCCCC !important;
}

/* The international note sits with the destination line now, so it needs to
 * flow as inline text rather than as its own block under the button. */
.paypal_form span.fine_print { display: block; margin-top: 2px; }

/* --- Empty cart is not Continue shopping -------------------------------
 * The two sat one line apart in the same link blue, and store.css's button
 * rule lowercased this one, so the pair read as "Continue shopping" and
 * "empty cart" - inconsistent with each other and easy to hit by mistake,
 * with only one of them destructive.
 *
 * This one is now set apart, muted rather than link-coloured, and cased like
 * everything else. text-transform has to be forced back: it comes from the
 * same !important button rule in store.css as the background did. */
#clear_cart_link {
  margin-top: 18px;
  clear: left;
}
#clear_cart_link button,
#clear_cart_link input[type="submit"] {
  text-transform: none !important;
  font-size: 11px !important;
  color: #777777 !important;
  text-decoration: none;
}
#clear_cart_link button:hover,
#clear_cart_link input[type="submit"]:hover {
  color: #BB6666 !important;
  text-decoration: underline;
}

/* --- checkout ----------------------------------------------------------
 * The delivery-address step and the confirm page. store.css has nothing for
 * these - the 2009 store had no checkout pages at all, it posted to PayPal
 * from the cart - so they are styled here to match the rest of the store. */
#checkout_summary { float: left; width: 380px; }
#checkout_summary table#totals { margin-top: 10px; width: 300px; }
#checkout_summary table#totals td { padding: 3px 0; border: 0; }
#checkout_summary table#totals td + td { text-align: right; }
#checkout_summary table#totals tr.grand td {
  border-top: 1px solid #444444;
  padding-top: 6px;
  color: #CCCCCC;
  font-size: 1.2em;
}
a.checkout_button {
  display: inline-block;
  padding: 6px 14px;
  text-decoration: none;
  color: #CCCCCC;
}

/* --- the delivery address form -----------------------------------------
 * Was a two-column table: a wide label column, fields at three different
 * widths depending on the size= attribute each happened to carry, and about
 * 100px between rows, all of it stranded against an empty right half of the
 * page.
 *
 * A single column at a readable measure instead, labels above their fields,
 * and the parts that belong together on one line - first/last name, and
 * city/state/zip. Nothing here is wider than it needs to be. */
.address_fields { max-width: 420px; }

.address_fields .field { margin-bottom: 12px; }
.address_fields .field label {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  color: #999999;
}
.address_fields .field input[type="text"],
.address_fields .field input[type="email"],
.address_fields .field select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background-color: #333333;
  color: #CCCCCC;
  border: 1px solid #444444;
  padding: 5px 6px;
  font: inherit;
}
.address_fields .field input:focus,
.address_fields .field select:focus {
  border-color: #6666FF;
  outline: none;
}

/* Fields that share a line. */
.address_fields .field_row { display: flex; gap: 10px; }
.address_fields .field_row .field { flex: 1 1 0; }
.address_fields .field_row .field.grow  { flex: 2 1 0; }
.address_fields .field_row .field.state { flex: 0 0 64px; }
.address_fields .field_row .field.zip   { flex: 0 0 90px; }

.address_fields .fine_print { margin: 14px 0 0; }
.address_fields .form_actions { margin: 16px 0 0; }

/* --- page headings -----------------------------------------------------
 * store.css sets h3 to #222222, a light-theme colour, so every heading on a
 * store page was near-black on black: "Confirm and pay" and "Where should we
 * send it?" were legible only as a slightly different shade of dark. The
 * subtotal was fixed for this earlier; the headings themselves were not.
 *
 * #subtotal h3 is re-declared after, because it is the same specificity as the
 * rule above and would otherwise be overridden by source order. */
#content h1, #content h2, #content h3,
#content h4, #content h5, #content h6 { color: #BBBBBB; }
#subtotal h3 { color: #CCCCCC; }

/* h4 is the product name in the cart and order tables. In the cart it is a
 * link and took the link colour, so it looked fine there and the problem only
 * showed on the order page, where it is plain text: #222222 on black, a
 * contrast ratio of 1.3 to 1. The rule above had been written for h1-h3 only. */

/* --- the payment panel -------------------------------------------------
 * PayPal renders its buttons and its card form inside cross-origin iframes, so
 * none of its text can be reached from here.
 *
 * The buttons are fine on black - PayPal draws them on their own solid fills.
 * The card form is not: its placeholders, its "Billing address" and "Ship to
 * billing address" labels and its age line are all drawn for a light page and
 * came out grey on black.
 *
 * So the light panel is not permanent. It appears only while the card form is
 * open, which is the only time it is needed - a standing light block that size
 * against this page is far more jarring than the problem it was fixing.
 * paypal_checkout.js adds .card_open when the container grows. */
.paypal_form {
  width: 320px;
  box-sizing: border-box;
}

.paypal_form.card_open {
  background: #DCDCDC;
  border: 1px solid #3A3A3A;
  border-radius: 6px;
  padding: 14px;
}

/* Payment errors are not fine print. This was inheriting .fine_print at 10px
 * in #777 grey, so "something went wrong" was smaller and quieter than the
 * shipping note beside it - on the one message where the buyer needs to know
 * something has happened and their money has not been taken. */
.paypal_form #paypal-error:not(:empty) {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
  color: #EEBBBB;
  background: #2A1414;
  border: 1px solid #AA4444;
  border-radius: 4px;
}
.paypal_form.card_open #paypal-error:not(:empty) {
  color: #7A1F1F;
  background: #F6E4E4;
  border-color: #C08080;
}

/* --- confirm page: line the two columns up -----------------------------
 * The left column started at 437, its totals table at 447 (its own margin),
 * and the payment panel at 451 (its own margin) - three starting lines within
 * 14px of each other, which reads as a wobble rather than as two columns.
 *
 * Scoped through #checkout_summary, which exists only on this page, so the
 * cart's own .paypal_form keeps the spacing it needs there. */
#checkout_summary table#totals { margin-top: 0; }
#checkout_summary + .paypal_form { margin-top: 0; }
#checkout_summary ~ .cart_actions { padding-top: 18px; }