/**
 * WooCommerce pages in the main site's look. The main site's stylesheet
 * (header, footer, type, .button) is loaded with its header (inc/chrome.php);
 * this file applies its form, button, tab and table styles to WooCommerce's
 * markup. Values are taken from the main site's components.
 */

:root {
  --hws-red: #d62631;
  --hws-green: #94c120;
  --hws-text: #404040;
  --hws-line: #455259;
  --hws-box: #dadddA;
  --hws-grey: #d9dcd8;
  --hws-font-bold: 'Futura LT W02 Bold Condensed', Arial, sans-serif;
  --hws-font-light: 'Futura LT W02 Light', Arial, sans-serif;
}

/* WooCommerce sets every image on its pages to height: auto and max-width:
   100%; the main site's header, footer and masthead images have fixed sizes. */
.woocommerce-page .footer-map__map {
  max-width: 31.25rem;
}
.woocommerce-page .site-logo__image {
  height: 3.375rem;
}
@media (min-width: 40em) {
  .woocommerce-page .site-logo__image {
    height: 4.125rem;
  }
}
.woocommerce-page .masthead__image img {
  height: 100%;
}

/* ------------------------------------------------------------------ */
/* Content                                                             */
/* ------------------------------------------------------------------ */

.hws-shop {
  color: var(--hws-text);
}
.hws-shop a:not(.button) {
  color: var(--hws-red);
}
.hws-shop h2,
.hws-shop h3 {
  margin: 1.5rem 0 1rem;
}

/* Forms: grey box, labels in Futura Light, white fields with a line. */
.hws-shop form.login,
.hws-shop form.register,
.hws-shop form.lost_reset_password,
.hws-shop form.checkout #customer_details,
.hws-shop form.woocommerce-EditAccountForm,
.hws-shop .woocommerce-MyAccount-content form.acf-form,
.hws-shop .woocommerce-address-fields,
.hws-shop form.checkout_coupon {
  background: var(--hws-box);
  border: 0;
  border-radius: 0;
  margin: 0 0 2rem;
  padding: 35px;
}
/* Single forms at a readable width on the full-width page (the account
   details have a second form below, ACF's profile fields). */
.hws-shop form.woocommerce-EditAccountForm,
.hws-shop .woocommerce-MyAccount-content form.acf-form,
.hws-shop .woocommerce-address-fields,
.hws-shop form.lost_reset_password {
  max-width: 45rem;
}
/* Account details: the account form and the profile fields side by side
   on wide screens. */
@media (min-width: 60em) {
  .woocommerce-edit-account .hws-shop .woocommerce-MyAccount-content {
    align-items: start;
    display: grid;
    gap: 0 2.5rem;
    grid-template-columns: 1fr 1fr;
  }
  .woocommerce-edit-account .hws-shop .woocommerce-MyAccount-content > * {
    grid-column: 1 / -1;
  }
  .woocommerce-edit-account .hws-shop .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm,
  .woocommerce-edit-account .hws-shop .woocommerce-MyAccount-content > form.acf-form {
    grid-column: auto;
    max-width: none;
  }
}
.hws-shop form .form-row,
.hws-shop .acf-field {
  margin: 0 0 1rem;
  padding: 0;
}
.hws-shop form .form-row label,
.hws-shop .acf-field .acf-label label {
  color: var(--hws-text);
  font-family: var(--hws-font-light);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 0.25rem;
}
.hws-shop form .form-row .required,
.hws-shop .acf-required {
  color: var(--hws-text);
  text-decoration: none;
}
.hws-shop input.input-text,
.hws-shop input[type='text'],
.hws-shop input[type='email'],
.hws-shop input[type='tel'],
.hws-shop input[type='password'],
.hws-shop input[type='number'],
.hws-shop select,
.hws-shop textarea,
.hws-shop .acf-field .acf-input input[type='text'],
.hws-shop .acf-field .acf-input input[type='email'],
.hws-shop .acf-field .acf-input select,
.hws-shop .select2-container .select2-selection--single {
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--hws-line);
  border-radius: 0;
  box-shadow: none;
  color: #000;
  font-family: var(--hws-font-bold);
  font-size: 1rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.6rem;
  width: 100%;
}
.hws-shop .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 1.5rem;
  padding: 0;
}
.hws-shop .select2-container .select2-selection--single .select2-selection__arrow {
  height: 2.25rem;
}
.hws-shop input:focus,
.hws-shop select:focus,
.hws-shop textarea:focus {
  outline: 2px solid var(--hws-line);
  outline-offset: 0;
}
.hws-shop .password-input {
  display: block;
  position: relative;
}
.hws-shop .woocommerce-form-login__rememberme,
.hws-shop .woocommerce-form__label-for-checkbox {
  align-items: center;
  display: inline-flex;
  font-family: var(--hws-font-light);
  gap: 0.4rem;
}

/* Radios and checkboxes as the main site's (form-item__radio,
   form-item__checkbox): grey border, blue when chosen. The e-learning
   app's own form-item inputs are left to the main site's stylesheet. */
.hws-shop input[type='checkbox']:not(.form-item__checkbox),
.hws-shop input[type='radio']:not(.form-item__radio) {
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  border: 1px solid #9da5a7;
  cursor: pointer;
  flex-shrink: 0;
  height: 1.25rem;
  margin: 0 0.6em 0 0;
  position: relative;
  top: -1px;
  transition: background-color 200ms, border-color 200ms, box-shadow 200ms;
  vertical-align: middle;
  width: 1.25rem;
}
.hws-shop input[type='radio']:not(.form-item__radio) {
  border-radius: 50%;
  height: 1.125rem;
  width: 1.125rem;
}
.hws-shop input[type='radio']:not(.form-item__radio):checked {
  background-color: #4f7799;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #4f7799;
}
.hws-shop input[type='checkbox']:not(.form-item__checkbox):checked {
  background: #4f7799 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E") 50% / 1rem no-repeat;
  border-color: #4f7799;
}
.hws-shop input[type='checkbox']:not(.form-item__checkbox):focus-visible,
.hws-shop input[type='radio']:not(.form-item__radio):focus-visible {
  outline: 2px solid #9da5a7;
  outline-offset: 2px;
}
/* Same rhythm as WooCommerce's form rows: ACF's own .acf-fields > .acf-field
   sets margin 0, and 10px under the label. */
.hws-shop .acf-fields > .acf-field {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
}
.hws-shop .acf-field .acf-label {
  margin-bottom: 0.25rem;
}
.hws-shop .hws-required-note {
  font-family: var(--hws-font-light);
  font-size: 0.875rem;
  margin: 0 0 2rem;
}
.hws-shop .acf-field ul.acf-radio-list li,
.hws-shop .acf-field ul.acf-checkbox-list li {
  margin-bottom: 0.35rem;
}
.hws-shop .acf-field ul.acf-radio-list li:last-child,
.hws-shop .acf-field ul.acf-checkbox-list li:last-child {
  margin-bottom: 0;
}
.hws-shop .acf-field ul.acf-radio-list li label,
.hws-shop .acf-field ul.acf-checkbox-list li label {
  align-items: flex-start;
  display: inline-flex;
}

/* Buttons: the main site's rounded button (.button--rounded .button--filled
   .button--black): black, red on hover. */
.hws-shop .button,
.hws-shop button[type='submit'],
.hws-shop input[type='submit'],
.hws-shop #place_order,
.woocommerce .hws-shop .button.alt,
.woocommerce .hws-shop .button.alt.disabled {
  -webkit-appearance: none;
  appearance: none;
  background-color: #000;
  border: 1px solid #000;
  border-radius: 3.125rem;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: 'Futura LT W01 Medium', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  padding: 0.5rem 1.5625rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 200ms cubic-bezier(0.4, 0, 1, 1);
}
.hws-shop .button:visited {
  color: #fff;
}
.hws-shop .button:hover,
.hws-shop .button:focus,
.hws-shop button[type='submit']:hover,
.hws-shop input[type='submit']:hover,
.hws-shop #place_order:hover,
.woocommerce .hws-shop .button.alt:hover {
  background-color: var(--hws-red);
  border-color: var(--hws-red);
  color: #fff;
}
/* Secondary: the main site's outlined rounded button (.button--rounded
   without --filled), black on hover. */
.hws-shop .button.button--rounded:not(.button--filled) {
  background-color: #fff;
  color: #000;
}
.hws-shop .button.button--rounded:not(.button--filled):hover,
.hws-shop .button.button--rounded:not(.button--filled):focus {
  background-color: #000;
  border-color: #000;
  color: #fff;
}
/* Red: the main site's .button--filled.button--red, black on hover. */
.hws-shop .button.button--red {
  background-color: var(--hws-red);
  border-color: var(--hws-red);
}
.hws-shop .button.button--red:hover,
.hws-shop .button.button--red:focus {
  background-color: #000;
  border-color: #000;
}
.hws-shop .button[disabled],
.hws-shop .button.disabled {
  cursor: default;
  opacity: 0.5;
}
.hws-shop .button--small {
  font-size: 0.75rem;
}
.hws-shop .button + .button {
  margin-left: 0.5rem;
}
.hws-shop #place_order {
  float: none;
  width: 100%;
}

/* WooCommerce's float clearfixes would become grid items. */
.hws-shop .col2-set::before,
.hws-shop .col2-set::after,
.hws-shop form.checkout::before,
.hws-shop form.checkout::after {
  content: none;
  display: none;
}

/* Login and registration side by side, as WooCommerce lays them out. */
.hws-shop .u-columns.col2-set {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.hws-shop .u-columns.col2-set .u-column1,
.hws-shop .u-columns.col2-set .u-column2 {
  float: none;
  width: auto;
}
/* One field per row, as on the main site (WooCommerce floats first/last). */
.hws-shop form .woocommerce-form-row--first,
.hws-shop form .woocommerce-form-row--last,
.hws-shop form .form-row-first,
.hws-shop form .form-row-last {
  float: none;
  width: 100%;
}

/* My account: navigation as the main site's tab links (.tab-links). */
.woocommerce-account .hws-shop .woocommerce-MyAccount-navigation {
  float: none;
  margin-bottom: 2.5rem;
  width: 100%;
}
.woocommerce-account .hws-shop .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}
@media (min-width: 40em) {
  .woocommerce-account .hws-shop .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
  }
}
.woocommerce-account .hws-shop .woocommerce-MyAccount-navigation li {
  font-family: 'Futura LT W01 Bold Condensed', Arial, sans-serif;
  font-size: 1.875rem;
  line-height: 1.2;
  padding-bottom: 0.3125rem;
  position: relative;
  text-align: center;
  text-transform: uppercase;
}
.woocommerce-account .hws-shop .woocommerce-MyAccount-navigation a {
  color: #daddda;
  text-decoration: none;
  transition: all linear 0.15s;
}
.woocommerce-account .hws-shop .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .hws-shop .woocommerce-MyAccount-navigation a:focus,
.woocommerce-account .hws-shop .woocommerce-MyAccount-navigation .is-active a {
  color: #000;
}
.woocommerce-account .hws-shop .woocommerce-MyAccount-navigation .is-active::after {
  background-color: #000;
  bottom: 0;
  content: '';
  height: 0.3125rem;
  left: 0;
  position: absolute;
  width: 100%;
}
.woocommerce-account .hws-shop .woocommerce-MyAccount-content {
  float: none;
  width: 100%;
}

/* Tables (cart, checkout review, orders): black rules and condensed
   headings, as the main site's lists. */
.hws-shop table.shop_table {
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  border-top: 1px solid #000;
  margin: 0 0 2.5rem;
  width: 100%;
}
.hws-shop table.shop_table th,
.hws-shop table.shop_table td {
  border: 0;
  border-bottom: 1px solid #000;
  color: #000;
  font-family: 'Futura LT W01 Book', Arial, sans-serif;
  font-weight: 400;
  padding: 0.9375rem 0.5rem;
  text-align: left;
  vertical-align: middle;
}
.hws-shop table.shop_table thead th {
  font-family: var(--hws-font-bold);
  font-size: 1rem;
  text-transform: uppercase;
}
.hws-shop table.shop_table .product-name,
.hws-shop table.shop_table .product-name a {
  color: #000;
  font-family: 'Futura LT W01 Bold Condensed', Arial, sans-serif;
  font-size: 1.25rem;
  line-height: 1.2;
  text-decoration: none;
}
.hws-shop table.shop_table .product-name .product-quantity {
  font-family: 'Futura LT W01 Book', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  white-space: nowrap;
}
.hws-shop table.shop_table .product-subtotal,
.hws-shop table.shop_table th.product-subtotal,
.hws-shop table.shop_table .product-total,
.hws-shop table.shop_table tfoot td {
  text-align: right;
  white-space: nowrap;
}
.hws-shop table.shop_table tfoot .order-total th,
.hws-shop table.shop_table tfoot .order-total td {
  border-bottom: 0;
  border-top: 2px solid #000;
  font-family: var(--hws-font-bold);
  font-size: 1.5rem;
}

/* Cart: no product images (trainings have none), a round remove button,
   a small quantity field, "update cart" as the secondary button. */
.hws-shop table.cart .product-thumbnail {
  display: none;
}
/* Remove (×) at the end of the row. A table cannot reorder its cells, so
   on wide screens the header and item rows are grids with the same
   columns and the remove cell comes last. */
@media (min-width: 769px) {
  .hws-shop table.cart,
  .hws-shop table.cart thead,
  .hws-shop table.cart tbody {
    display: block;
  }
  .hws-shop table.cart tr {
    align-items: center;
    border-bottom: 1px solid #000;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6rem 6.5rem 8rem 7.5rem;
  }
  .hws-shop table.cart th,
  .hws-shop table.cart td {
    border-bottom: 0;
  }
  .hws-shop table.cart .product-name {
    padding-left: 0;
  }
  .hws-shop table.cart .product-remove {
    order: 1;
    padding-right: 0;
    text-align: right;
  }
  .hws-shop table.cart td.actions {
    grid-column: 1 / -1;
  }
  .hws-shop table.cart tbody tr:last-child {
    border-bottom: 0;
  }
}
/* "Remove" (inc/account.php) as the main site's small outlined button. */
.hws-shop table.cart a.remove {
  background: #fff;
  border: 1px solid #000;
  border-radius: 3.125rem;
  color: #000 !important;
  display: inline-block;
  font-family: 'Futura LT W01 Medium', Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  height: auto;
  line-height: normal;
  padding: 0.35rem 1rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 200ms cubic-bezier(0.4, 0, 1, 1);
  white-space: nowrap;
  width: auto;
}
.hws-shop table.cart a.remove:hover,
.hws-shop table.cart a.remove:focus {
  background: var(--hws-red);
  border-color: var(--hws-red);
  color: #fff !important;
}
.hws-shop table.cart .quantity input.qty {
  border: 1px solid #9da5a7;
  font-family: 'Futura LT W01 Book', Arial, sans-serif;
  text-align: center;
  width: 4.5rem;
}
.hws-shop table.cart td.actions {
  background: transparent;
  border-bottom: 0;
  padding-right: 0;
  text-align: right;
}
/* WooCommerce stacks the cart on small screens (768px). */
@media (max-width: 768px) {
  /* The × after the item's last line, on the right. */
  .hws-shop table.cart tr.cart_item {
    display: flex;
    flex-direction: column;
  }
  .hws-shop table.cart td.product-remove {
    order: 1;
    padding: 0.5rem 0 0.9375rem;
    position: static;
    text-align: right;
    transform: none;
  }
  .hws-shop table.cart td.product-remove::before {
    display: none;
  }
  /* No grey on every other item. */
  .hws-shop table.cart.shop_table_responsive tr:nth-child(2n) td {
    background-color: transparent;
  }
  .hws-shop table.cart td.actions {
    padding-left: 0;
  }
}
.hws-shop table.cart button[name='update_cart'] {
  background-color: #fff;
  color: #000;
  font-size: 0.75rem;
}
.hws-shop table.cart button[name='update_cart']:hover:not([disabled]) {
  background-color: #000;
  border-color: #000;
  color: #fff;
}
.hws-shop table.cart button[name='update_cart'][disabled] {
  opacity: 0.4;
}

/* Cart page totals: the same card as the checkout's order. */
.hws-shop .cart-collaterals .cart_totals {
  border: 1px solid #000;
  float: right;
  margin-bottom: 2rem;
  max-width: 100%;
  padding: 0 1.5625rem;
  width: 26rem;
}
.hws-shop .cart_totals h2 {
  background: #000;
  color: #fff;
  font-family: var(--hws-font-bold);
  font-size: 1.5rem;
  line-height: 1.1;
  margin: 0 -1.5625rem;
  padding: 1rem 1.5625rem;
  text-transform: uppercase;
}
.hws-shop .cart_totals table.shop_table {
  border-top: 0;
  margin: 0.5rem 0 1.5rem;
}
.hws-shop .cart_totals table.shop_table th {
  padding-left: 0;
}
.hws-shop .cart_totals table.shop_table td {
  padding-right: 0;
  text-align: right;
}
.hws-shop .cart_totals table.shop_table .order-total th,
.hws-shop .cart_totals table.shop_table .order-total td {
  border-bottom: 0;
  border-top: 2px solid #000;
}
.hws-shop .cart_totals table.shop_table .order-total th,
.hws-shop .cart_totals table.shop_table .order-total td,
.hws-shop .cart_totals table.shop_table .order-total strong {
  font-family: var(--hws-font-bold);
  font-size: 1.5rem;
  font-weight: 400;
}
.hws-shop .cart_totals .wc-proceed-to-checkout {
  padding: 0 0 1.5625rem;
}
.hws-shop .cart_totals .wc-proceed-to-checkout .checkout-button {
  display: block;
  font-size: 1rem;
  margin: 0;
  padding: 0.75rem 1.5625rem;
  width: 100%;
}

/* Checkout: the billing details in the grey panel, the order as a white
   card beside it on wide screens (below on small ones). */
.hws-shop form.checkout h3,
.hws-shop #order_review_heading {
  color: #000;
  font-family: var(--hws-font-bold);
  font-size: 1.5rem;
  line-height: 1.1;
  margin: 0 0 1.25rem;
  text-transform: uppercase;
}
.hws-shop #customer_details .col-1,
.hws-shop #customer_details .col-2 {
  float: none;
  width: 100%;
}
.hws-shop #order_review_heading {
  background: #000;
  color: #fff;
  margin: 0;
  padding: 1rem 1.5625rem;
}
.hws-shop #order_review {
  border: 1px solid #000;
  border-top: 0;
  margin-bottom: 2rem;
  padding: 0.5rem 1.5625rem 1.5625rem;
}
.hws-shop #order_review table.shop_table {
  border-top: 0;
  margin-bottom: 1.5rem;
}
.hws-shop #order_review table.shop_table th:first-child,
.hws-shop #order_review table.shop_table td:first-child {
  padding-left: 0;
}
.hws-shop #order_review table.shop_table th:last-child,
.hws-shop #order_review table.shop_table td:last-child {
  padding-right: 0;
  text-align: right;
}
.hws-shop #order_review .add-more-training td,
.hws-shop #order_review .add-more-training th {
  border-bottom: 0;
  text-align: left;
}
@media (min-width: 60em) {
  .hws-shop form.checkout {
    align-items: start;
    display: grid;
    gap: 0 2.5rem;
    grid-template-columns: 3fr 2fr;
    /* The heading's row as high as the heading, the card's row the rest
       (the billing panel spans both). */
    grid-template-rows: auto 1fr;
  }
  .hws-shop form.checkout > * {
    grid-column: 1 / -1;
  }
  .hws-shop form.checkout > #customer_details {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .hws-shop form.checkout > #order_review_heading {
    grid-column: 2;
    grid-row: 1;
  }
  .hws-shop form.checkout > #order_review {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Checkout pages outside Germany (inc/account.php): the main site's
   contact tile (styled by its stylesheet); the shop's own rules for
   headings, links and buttons undone inside it. */
.hws-shop .hws-checkout-contact .contact-tile__container {
  padding-left: 0;
  padding-right: 0;
}
/* WooCommerce sets images to height: auto; the tile crops it square. */
.woocommerce-page .hws-checkout-contact .contact-tile__image img {
  height: 100%;
  max-width: none;
}
.hws-shop .hws-checkout-contact .contact-tile__title {
  margin: 0;
}
.hws-shop .hws-checkout-contact .contact-tile__body > :last-child {
  margin-bottom: 0;
}
.hws-shop .hws-checkout-contact .contact-tile__content a:not(.button) {
  color: inherit;
}

/* Payment: the method on white, its note in a grey box; terms with the
   main site's checkbox; the order button full width. */
.hws-shop #payment {
  background: transparent;
  border-radius: 0;
}
.hws-shop #payment ul.payment_methods {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
}
.hws-shop #payment ul.payment_methods li {
  list-style: none;
  margin: 0 0 0.5rem;
}
.hws-shop #payment ul.payment_methods li > label {
  color: #000;
  font-family: 'Futura LT W01 Bold Condensed', Arial, sans-serif;
  font-size: 1.125rem;
}
.hws-shop #payment div.payment_box {
  background: var(--hws-box);
  border-radius: 0;
  color: #000;
  font-family: 'Futura LT W01 Book', Arial, sans-serif;
  font-size: 0.875rem;
  margin: 0.5rem 0 0;
  padding: 0.75rem 1rem;
}
.hws-shop #payment div.payment_box::before {
  display: none;
}
.hws-shop #payment div.form-row.place-order {
  margin: 0;
  padding: 0;
}
.hws-shop .woocommerce-terms-and-conditions-wrapper {
  font-family: 'Futura LT W01 Book', Arial, sans-serif;
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}
/* Checkbox, then the text beside it; the required star at the end of the
   text (WooCommerce's own star element stays for screen readers). */
.hws-shop .woocommerce-terms-and-conditions-wrapper .form-row label.woocommerce-form__label-for-checkbox.checkbox {
  align-items: flex-start;
  display: flex;
  font-family: inherit;
}
.hws-shop .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text {
  flex: 1;
  min-width: 0;
}
.hws-shop .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text::after {
  content: '\00a0*';
}
.hws-shop .woocommerce-terms-and-conditions-wrapper label.checkbox > .required {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}
.hws-shop #place_order {
  font-size: 1rem;
  padding: 0.75rem 1.5625rem;
}

/* Notices: grey panel with a coloured edge (green: done, red: error),
   the text centred with a small outlined button on the right. */
.hws-shop .woocommerce-message,
.hws-shop .woocommerce-info,
.hws-shop .woocommerce-error,
.hws-shop .woocommerce-notice {
  background: var(--hws-box);
  border: 0;
  border-left: 5px solid #000;
  color: #000;
  font-family: 'Futura LT W01 Book', Arial, sans-serif;
  list-style: none;
  margin: 0 0 1.875rem;
  padding: 1rem 1.5625rem;
}
.hws-shop .woocommerce-message,
.hws-shop .woocommerce-info {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
}
.hws-shop .woocommerce-message {
  border-left-color: var(--hws-green);
}
.hws-shop .woocommerce-error {
  border-left-color: var(--hws-red);
}
.hws-shop .woocommerce-message::before,
.hws-shop .woocommerce-info::before,
.hws-shop .woocommerce-error::before {
  content: none;
}
@media (min-width: 40em) {
  /* The button beside the text, however long the text. */
  .hws-shop .woocommerce-message,
  .hws-shop .woocommerce-info {
    flex-wrap: nowrap;
  }
}
.hws-shop .woocommerce-message .button,
.hws-shop .woocommerce-info .button,
.hws-shop .woocommerce-message .restore-item {
  background-color: #fff;
  color: #000;
  flex-shrink: 0;
  float: none;
  font-size: 0.75rem;
  margin: 0;
  order: 1;
  white-space: nowrap;
}
/* The cart's "Undo?" link (no .button class) as the same outlined pill. */
.hws-shop .woocommerce-message .restore-item {
  border: 1px solid #000;
  border-radius: 3.125rem;
  font-family: 'Futura LT W01 Medium', Arial, sans-serif;
  line-height: normal;
  padding: 0.5rem 1.5625rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 200ms cubic-bezier(0.4, 0, 1, 1);
}
.hws-shop .woocommerce-message .button:hover,
.hws-shop .woocommerce-info .button:hover,
.hws-shop .woocommerce-message .restore-item:hover,
.hws-shop .woocommerce-message .restore-item:focus {
  background-color: #000;
  border-color: #000;
  color: #fff;
}

/* Order confirmation overview. */
.hws-shop ul.order_details {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}
.hws-shop ul.order_details li {
  border: 0;
  float: none;
  font-size: 0.85rem;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}
.hws-shop ul.order_details li strong {
  display: block;
  font-family: var(--hws-font-bold);
  font-size: 1.1rem;
  text-transform: none;
}