/* ==========================================================================
   Print setup page — header bar only (route: /printsetup.html)
   Every selector is namespaced under .ps-head so nothing here can reach the
   crop frame, the border panels or the canvas that produces the saved preview.
   Colours follow the cart2 / order2 theme tokens.
   ========================================================================== */

.ps-head {
  align-items: center;
  border-bottom: 1px solid #e6e6ea;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 6px;
  padding-bottom: 14px;
}

.ps-head__title {
  color: #1c1c1e;
  font-family: "Source Sans Pro", "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

/* The product name trails the page title, so it is set back a step to keep the
   heading itself the first thing read. */
.ps-head__product {
  color: #6b7280;
  font-weight: 400;
}

.ps-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ps-head__btn {
  border: 1px solid transparent;
  border-radius: 6px;
  display: inline-block;
  font-family: "Source Sans Pro", "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 10px 16px;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.ps-head__btn i {
  margin-right: 7px;
}

/* The colour is repeated across every link state and qualified with the a type
   selector on purpose: javascript/stylesheet.css sets `a:link { color: inherit }`,
   which outranks a bare class and would otherwise leave this button's label the
   inherited grey on a near-black background. */
a.ps-head__btn--dark,
a.ps-head__btn--dark:link,
a.ps-head__btn--dark:visited {
  background: #1c1c1e;
  color: #ffffff;
}

a.ps-head__btn--dark:hover,
a.ps-head__btn--dark:focus,
a.ps-head__btn--dark:active {
  background: #000000;
  color: #ffffff;
  text-decoration: none;
}

/* Same specificity treatment as the dark button, for the same reason */
a.ps-head__btn--ghost,
a.ps-head__btn--ghost:link,
a.ps-head__btn--ghost:visited {
  background: #ffffff;
  border-color: #e6e6ea;
  color: #6b7280;
}

a.ps-head__btn--ghost:hover,
a.ps-head__btn--ghost:focus,
a.ps-head__btn--ghost:active {
  border-color: #c9ccd1;
  color: #1c1c1e;
  text-decoration: none;
}

@media (max-width: 575px) {
  .ps-head {
    gap: 10px;
  }

  .ps-head__title {
    font-size: 20px;
  }

  /* Both actions share the row evenly instead of stacking, which keeps the
     header a single line tall on a 320px screen. */
  .ps-head__actions {
    width: 100%;
  }

  .ps-head__btn {
    flex: 1 1 0;
    text-align: center;
  }
}