/* =====================================================================
   People Skills Development: WooCommerce pages

   Hand-written, like native-adapters.css, and loaded only on the cart,
   checkout, order-received and product pages, after the adapters. The
   templates for those pages (templates/page-cart.html and its siblings)
   put WooCommerce's blocks inside #site-root and a `.wc-page` section,
   so the site's tokens (site.css B) are in scope here and every value
   below is one of them or a number mirrored from register.css, which is
   named where it is.

   Restrained on purpose: WooCommerce's layout, floating labels and
   step numbering are left as they are. What changes is type, colour,
   the field border and the buttons, so the pages read as the site's.

   A  Measure and type    headings in the display face, body in navy ink
   B  Fields              register.css C's input border and focus ring
   C  Buttons             site.css's pill, cyan on navy ink
   D  Notices             the status line register.css C draws
   E  Product page        the legacy single-product template
   ===================================================================== */


/* ---------------------------------------------------------------------
   A  Measure and type
   --------------------------------------------------------------------- */
#site-root .wc-page {
  color: var(--c-ink);
}
#site-root .wc-page .wc-block-components-title,
#site-root .wc-page .wc-block-components-checkout-step__title,
#site-root .wc-page .wc-block-cart__totals-title,
#site-root .wc-page .wc-block-order-confirmation-totals__title,
#site-root .wc-page .wc-block-order-confirmation-billing-address h2,
#site-root .wc-page h2,
#site-root .wc-page h3 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--c-navy-deep);
}
#site-root .wc-page .wc-block-components-product-name {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-navy-deep);
  text-decoration: none;
}
/* The attendees, company and grant under a workshop's line */
#site-root .wc-page .wc-block-components-product-details,
#site-root .wc-page .wc-item-meta,
#site-root .wc-page dl.variation {
  color: var(--c-muted);
  font-size: .95rem;
}
#site-root .wc-page a:not(.wc-block-components-button):not(.button) {
  color: var(--c-navy);
  text-underline-offset: .2em;
}

/* The order-received status line stands in the page head's title slot */
#site-root .page-head .wc-block-order-confirmation-status p {
  margin: 0;
}


/* ---------------------------------------------------------------------
   B  Fields
   Mirrors .rg-input (register.css C): 1.5px #9fb2c3 border, 8px radius,
   navy on hover and focus, the sky ring on focus.
   --------------------------------------------------------------------- */
#site-root .wc-page .wc-block-components-text-input input,
#site-root .wc-page .wc-block-components-textarea,
#site-root .wc-page .wc-blocks-components-select__select,
#site-root .wc-page .wc-block-components-combobox-control input,
#site-root .wc-page .input-text,
#site-root .wc-page select {
  border: 1.5px solid #9fb2c3;
  border-radius: 8px;
  background: var(--c-white);
  color: var(--c-ink);
}
#site-root .wc-page .wc-block-components-text-input input:focus,
#site-root .wc-page .wc-block-components-textarea:focus,
#site-root .wc-page .wc-blocks-components-select__select:focus,
#site-root .wc-page .input-text:focus,
#site-root .wc-page select:focus {
  outline: none;
  border-color: var(--c-navy);
  box-shadow: 0 0 0 3px var(--c-sky);
}
#site-root .wc-page .wc-block-components-text-input.has-error input {
  border-color: #b3261e;
}


/* ---------------------------------------------------------------------
   C  Buttons
   site.css's .btn and .btn-primary: a pill in the display face, cyan
   with navy ink, uppercase.
   --------------------------------------------------------------------- */
#site-root .wc-page .wc-block-components-button:not(.is-link),
#site-root .wc-page .button,
#site-root .wc-page button[type="submit"] {
  min-height: 48px;
  padding: .7rem 1.4rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--c-cyan);
  color: var(--c-navy-ink);
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
#site-root .wc-page .wc-block-components-button:not(.is-link):hover,
#site-root .wc-page .button:hover,
#site-root .wc-page button[type="submit"]:hover {
  background: #33aaff;
}
#site-root .wc-page .wc-block-components-button:not(.is-link):focus-visible,
#site-root .wc-page .button:focus-visible {
  outline: 3px solid var(--c-sky);
  outline-offset: 2px;
}


/* ---------------------------------------------------------------------
   D  Notices
   The navy-edged sky panel .rg-ok draws (register.css C); an error
   takes the form's red edge instead.
   --------------------------------------------------------------------- */
#site-root .wc-page .wc-block-components-notice-banner,
#site-root .wc-page .woocommerce-message,
#site-root .wc-page .woocommerce-info {
  border: 0;
  border-left: 4px solid var(--c-navy);
  border-radius: 0;
  background: var(--c-sky-soft);
  color: var(--c-navy-deep);
}
#site-root .wc-page .wc-block-components-notice-banner.is-error,
#site-root .wc-page .woocommerce-error {
  border-left-color: #b3261e;
}


/* ---------------------------------------------------------------------
   E  Product page
   The title as a page title (pathway.css B), the price and summary in
   the site's type.
   --------------------------------------------------------------------- */
#site-root .wc-page .product_title {
  margin: 0 0 .75rem;
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  font-weight: 700;
  line-height: 1.06;
  color: var(--c-navy-deep);
}
#site-root .wc-page .price {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-navy);
}
#site-root .wc-page .woocommerce-product-details__short-description {
  color: var(--c-muted);
}