/* Shop-specific additions. app.css is a verbatim copy of the parent site's stylesheet
   and must stay untouched so it can be swapped for a newer parent version.
   Anything the Go version needs beyond it goes here. */

/* Enter in a quantity field submits the form; this off-screen button is the one it
   "presses" (first submit button in the form) so it saves rather than clears. */
.default-submit {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* "More Info [+]" toggle on the cart page: pure CSS, replaces the old jQuery handler. */
.infobox-toggle-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.infobox li.toggle-display { display: none; }
.infobox-toggle-input:checked + .infobox li.toggle-display { display: list-item; }
.infobox li.toggle label {
  display: inline;
  position: relative;
  margin: 0;
  font-size: 1rem;
  color: #666;
  background: #cee;
  cursor: pointer;
}
.infobox li.toggle label span span { text-decoration: underline; }
.infobox li.toggle .t-open { display: none; }
.infobox-toggle-input:checked + .infobox li.toggle .t-open { display: inline; }
.infobox-toggle-input:checked + .infobox li.toggle .t-closed { display: none; }
.infobox-toggle-input:focus-visible + .infobox li.toggle label { outline: 2px solid #09d; }

/* Popover-based modal (replaces Foundation's reveal-modal, which needs its JS). */
.kaady-popover {
  width: 80%;
  max-width: 71.42857rem;
  padding: 2.5rem;
  background: #fff;
  border: solid 1px #666;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  max-height: 92vh;
  overflow: auto;
}
/* app.css resets margins on everything, which defeats the popover's default margin:auto
   and pins it to the top-left corner; this puts it back in the middle of the screen. */
.kaady-popover { margin: auto; }
.kaady-popover::backdrop { background: rgba(0, 0, 0, 0.45); }
.kaady-popover img { max-width: 100%; height: auto; }
.kaady-popover .close-popover {
  position: absolute;
  top: 0.5rem;
  right: 1.1rem;
  margin: 0;
  padding: 0 1rem;
  background: transparent;
  color: #aaa;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.kaady-popover .close-popover:hover,
.kaady-popover .close-popover:focus { color: #666; background: transparent; }

/* Popover variants of Foundation's .popup-state / CCV modals. */
.kaady-popover.popup-state { background: #ECFAFF; }
@media only screen and (min-width: 40.063em) {
  .kaady-popover.popup-state { max-width: 450px; }
}
.kaady-popover.popup-state .close-popover { right: .6rem; font-size: 3rem; }
.kaady-popover > :first-child { margin-top: 0; }

/* Buttons used as inline links inside labels ("Change State?", "Credit Card Validation"). */
label .btn-plain { display: inline; margin: 0; font-size: inherit; cursor: pointer; }
/* "Change State?" sits at the right edge of the label line. The old markup floated a span
   inside a link; a button is its own formatting context, so the button itself floats. */
label .btn-state {
  float: right;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: red;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
}
label .btn-state:hover, label .btn-state:focus { background: transparent; color: red; }

/* Cart: the Total column keeps one width so the layout does not jump while typing a
   quantity. 9.5rem holds "$99,999.99" in bold, plus the cell padding. */
th.cell-total-th,
td.cell-total {
  width: 9.5rem;
  min-width: 9.5rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* State page: app.css spreads the buttons with space-around, which suits three buttons
   (there used to be a Washington one) but pushes two far apart. Keep them together. */
.select-state-buttons { justify-content: center; }

/* State page: the two notes share one dashed rule above them (not one each), and the
   Washington note is bold. */
.pgbody-pg-step-start .state-notes p.note-wa { font-weight: 700; }
.pgbody-pg-step-start .state-notes p.note-products {
  margin-top: 1.25rem;
  padding-top: 0;
  border-top: 0;
}

/* Washington note under the shipping City/State/Zip row (checkout only; the state page keeps
   the plain .note-alt look): close to the row, framed by dashed lines on a pale background,
   with room before the next row. */
#wa-note .note-alt {
  margin: 0 0 2rem 0;
  padding: .9rem 1rem;
  background: #ECFAFF;
  border-top: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc;
  line-height: 1.3;
}

/* Billing address: dimmed while "Same as Shipping" is ticked (checkout.js toggles the
   fieldset's disabled state; the server ignores the section in that case anyway). */
fieldset.billing-fields {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
fieldset.billing-fields:disabled { opacity: 0.45; }
fieldset.billing-fields:disabled input,
fieldset.billing-fields:disabled select { cursor: not-allowed; }