/* Scoped additions for the native PHP commerce pages. Existing site styles remain authoritative elsewhere. */
.commerce-page {
  --commerce-navy: var(--secondary-color);
  --commerce-gold: var(--theme-color);
  --commerce-ink: var(--color1);
  --commerce-muted: var(--color2);
  --commerce-border: #d8d5cd;
  --commerce-surface: #fff;
  --commerce-danger: #8b1e24;
  --commerce-success: #185b37;
  color: var(--color2);
  font-family: Arimo, Arial, sans-serif;
}

.commerce-page .commerce-content {
  display: block;
  min-width: 0;
}

/* A page loaded by sending a form skips the page loader (see the script in templates/header.php). */
.no-loader #preloader {
  display: none !important;
}

/* The title banner uses the static pages' markup and classes. The store's heading and link colours
   would otherwise win over the theme's white banner text. */
.commerce-page .commerce-banner .page-title-inner > h1 {
  color: #fff;
  font-weight: 700;
}
.commerce-page .commerce-banner ol.breadcrumb li.breadcrumb-item:not(.active) a {
  color: #fff;
}
/* Space between the banner and the page's own content. */
.commerce-page .commerce-banner {
  margin-bottom: 2.5rem;
}

/* The title banner sits flush under the fixed header, so the
   header offset that other pages get is not needed. */
@media (min-width: 1032px) {
  .commerce-page .commerce-content.commerce-has-banner {
    padding-top: 0;
  }
}

.commerce-page .commerce-content [hidden] {
  display: none !important;
}

.commerce-page .commerce-content > section,
.commerce-page .commerce-content > article {
  display: block;
  width: 100%;
}

.commerce-page .commerce-skip-link {
  position: absolute;
  z-index: 10000;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.65rem 0.9rem;
  transform: translateY(-150%);
  border-radius: 4px;
  background: var(--commerce-navy);
  color: #fff;
}

.commerce-page .commerce-skip-link:focus {
  transform: translateY(0);
}

/* The cart links in the header are also used by the static pages, so these rules are not scoped to .commerce-page. */
.sticky-menu .commerce-sticky-actions {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.sticky-menu .commerce-sticky-cart {
  color: var(--color1);
  font: 700 1rem Nunito, Arimo, sans-serif;
  white-space: nowrap;
}

.sticky-menu .commerce-sticky-cart:hover,
.sticky-menu .commerce-sticky-cart[aria-current="page"] {
  color: var(--theme-color);
}

@media (min-width: 1032px) {
  .commerce-page .commerce-content {
    padding-top: 6rem;
  }
}

.header-right .commerce-header-cart {
  margin-right: 2rem;
  color: var(--color1);
  font: 700 1rem Nunito, Arimo, sans-serif;
  white-space: nowrap;
}

.header-right .commerce-header-cart:hover,
.header-right .commerce-header-cart[aria-current="page"] {
  color: var(--theme-color);
}



.commerce-page .commerce-content h1,
.commerce-page .commerce-content h2,
.commerce-page .commerce-content h3,
.commerce-page .commerce-content h4,
.commerce-page .commerce-content legend {
  color: var(--color1);
  font-family: Nunito, Arimo, sans-serif;
  font-weight: 900;
}

/* Store links are dark, turning gold on hover. The theme's own "simple-link" links are left to the theme, so
   they look and behave exactly as on the homepage. (:where adds no weight, so other store link rules still win.) */
.commerce-page .commerce-content a:where(:not(.simple-link)) {
  color: var(--color1);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.commerce-page .commerce-content a:where(:not(.simple-link)):hover {
  color: var(--theme-color);
}

.commerce-page .commerce-content :disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

/* Bold text uses Nunito, as the theme's headings and buttons do. The site loads Arimo only in regular
   and medium, so a bold Arimo would be a browser-faked bold (prices, table headings, totals, admin labels). */
.commerce-page :is(strong, b, th, dt),
.commerce-page .commerce-content .commerce-table td::before,
.commerce-page .commerce-order-totals .commerce-order-total,
.commerce-page .commerce-content .commerce-invoice-items td::before,
.commerce-page .commerce-admin-filter a[aria-current="page"],
.commerce-page .commerce-admin-state,
.commerce-page .commerce-admin-table td::before {
  font-family: Nunito, Arimo, sans-serif;
}

/* Labels and field errors use Nunito, as the theme's own form labels do; Arimo is for paragraph text. */
.commerce-page .commerce-content label {
  display: inline-block;
  margin-bottom: 0.35rem;
  color: var(--color1);
  font-family: Nunito, Arimo, sans-serif;
  font-weight: 600;
}

/* Fields follow the contact form's look (rounded, tall, Nunito). The faint border keeps them visible on the
   store's white background. */
.commerce-page .commerce-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.commerce-page .commerce-content select,
.commerce-page .commerce-content textarea {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 3.25rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid #e3ddcf;
  border-radius: 10px;
  background: var(--commerce-surface);
  color: var(--commerce-ink);
  font: 600 1rem/1.4 Nunito, Arimo, sans-serif;
}

/* Example hints (set in form_field() in includes/forms.php): the lightest grey that still reads on white,
   lighter and thinner than typed text so they never look filled in. */
.commerce-page .commerce-content input::placeholder,
.commerce-page .commerce-content textarea::placeholder {
  color: #767676;
  font-weight: 400;
  opacity: 1;
}

.commerce-page .commerce-content textarea {
  min-height: 7rem;
  resize: vertical;
}

/* Drop-downs draw their own arrow, set in from the right edge by the same space as the text on the left
   (the browser's own arrow sits right against the edge). */
.commerce-page .commerce-content select {
  appearance: none;
  padding-right: 2.75rem;
  background: var(--commerce-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23333' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 1.1rem center / 0.75rem auto;
}

/* Nunito's letters sit high in their line, so a box centred on the line looks low; top: -1.5px centres it on
   the capital letters instead. */
.commerce-page .commerce-content input[type="checkbox"],
.commerce-page .commerce-content input[type="radio"] {
  position: relative;
  top: -1.5px;
  left: auto;
  width: 1rem;
  height: 1rem;
  margin: 0 0.45rem 0 0;
  opacity: 1;
  transform: none;
  accent-color: var(--color1);
  vertical-align: middle;
}

.commerce-page .commerce-content input[type="checkbox"] + label,
.commerce-page .commerce-content input[type="radio"] + label {
  position: static;
  padding-left: 0;
}

.commerce-page .commerce-content input[type="checkbox"] + label::before,
.commerce-page .commerce-content input[type="checkbox"] + label::after,
.commerce-page .commerce-content input[type="radio"] + label::before,
.commerce-page .commerce-content input[type="radio"] + label::after {
  display: none;
  content: none;
}

.commerce-page .commerce-content input:focus,
.commerce-page .commerce-content select:focus,
.commerce-page .commerce-content textarea:focus {
  border-color: var(--color1);
  box-shadow: 0 0 0 2px rgb(181 154 83 / 28%);
}

.commerce-page .commerce-content button,
.commerce-page .commerce-content input[type="submit"],
.commerce-page .commerce-content input[type="button"],
.commerce-page .commerce-content .commerce-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 3.25rem;
  max-width: 100%;
  padding: 0.65rem 1.5rem;
  /* No outline, like the theme's .thm-btn: the hover colour then covers the whole button, edge to edge. */
  border: 0;
  border-radius: 5px;
  background: var(--commerce-gold);
  color: #fff;
  font: 700 0.95rem/1.3 Nunito, Arimo, sans-serif;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition2);
}

.commerce-page .commerce-content button:not(.commerce-button--quiet)::before,
.commerce-page .commerce-content button:not(.commerce-button--quiet)::after,
.commerce-page .commerce-content .commerce-button:not(.commerce-button--quiet)::before,
.commerce-page .commerce-content .commerce-button:not(.commerce-button--quiet)::after {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  width: 20%;
  background: var(--commerce-navy);
  content: "";
  opacity: 0;
  transition: var(--transition2);
}

.commerce-page .commerce-content button:not(.commerce-button--quiet)::before,
.commerce-page .commerce-content .commerce-button:not(.commerce-button--quiet)::before {
  left: 0;
}

.commerce-page .commerce-content button:not(.commerce-button--quiet)::after,
.commerce-page .commerce-content .commerce-button:not(.commerce-button--quiet)::after {
  right: 0;
}

.commerce-page .commerce-content button:not(.commerce-button--quiet):is(:hover, :focus-visible)::before,
.commerce-page .commerce-content button:not(.commerce-button--quiet):is(:hover, :focus-visible)::after,
.commerce-page .commerce-content .commerce-button:not(.commerce-button--quiet):is(:hover, :focus-visible)::before,
.commerce-page .commerce-content .commerce-button:not(.commerce-button--quiet):is(:hover, :focus-visible)::after {
  width: 100%;
  opacity: 1;
}

.commerce-page .commerce-content button:is(:hover, :focus-visible),
.commerce-page .commerce-content .commerce-button:is(:hover, :focus-visible) {
  color: #fff;
}

.commerce-page .commerce-content input[type="submit"]:is(:hover, :focus-visible),
.commerce-page .commerce-content input[type="button"]:is(:hover, :focus-visible) {
  background: var(--commerce-navy);
  color: #fff;
}

.commerce-page .commerce-content .commerce-button--secondary,
.commerce-page .commerce-content button.commerce-button--secondary {
  background: var(--commerce-navy);
  color: #fff;
}

.commerce-page .commerce-content .commerce-button--secondary:not(.commerce-button--quiet)::before,
.commerce-page .commerce-content .commerce-button--secondary:not(.commerce-button--quiet)::after,
.commerce-page .commerce-content button.commerce-button--secondary:not(.commerce-button--quiet)::before,
.commerce-page .commerce-content button.commerce-button--secondary:not(.commerce-button--quiet)::after {
  /* Match the homepage's navy Nutritional Snacks button. */
  background: #000;
}

.commerce-page .commerce-content .commerce-button--secondary:is(:hover, :focus-visible),
.commerce-page .commerce-content button.commerce-button--secondary:is(:hover, :focus-visible) {
  color: #fff;
}

/* Quiet actions (Remove, Update, Cancel order, Change address, Print invoice, Sign out): an icon and text,
   no underline, dark text that turns gold on hover. They are buttons, so the icon takes the text colour (the
   theme's rule for icons in buttons). Links that go somewhere, like "Continue shopping", stay plain links. */
.commerce-page .commerce-content .commerce-button--quiet,
.commerce-page .commerce-content button.commerce-button--quiet {
  min-height: 2.3rem;
  padding: 0.4rem 0.2rem;
  border: 0;
  background: transparent;
  color: var(--color1);
  text-decoration: none;
}

.commerce-page .commerce-content .commerce-button--quiet:is(:hover, :focus-visible),
.commerce-page .commerce-content button.commerce-button--quiet:is(:hover, :focus-visible) {
  background: transparent;
  color: var(--commerce-gold);
}

.commerce-page .commerce-content .commerce-button--quiet i {
  margin-right: 0.5rem;
}

.commerce-page .commerce-content .commerce-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #eeebe4;
  border-radius: 10px;
  background: var(--commerce-surface);
}

.commerce-page .commerce-content .commerce-card__image-link {
  position: relative;
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  background: #eeede9;
}

.commerce-page .commerce-content .commerce-card__image-link img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: var(--transition);
}

.commerce-page .commerce-content .commerce-card__image-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  z-index: 1;
  transition: var(--transition);
}

.commerce-page .commerce-content .commerce-card__image-action {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 3.5rem;
  height: 3.5rem;
  border: 3px solid #fff;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  line-height: 3.125rem;
  font-size: 1.25rem;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: var(--transition);
}

.commerce-page .commerce-content .commerce-card__image-link:hover img,
.commerce-page .commerce-content .commerce-card__image-link:focus-visible img {
  transform: scale(1.05) rotate(2deg);
}

.commerce-page .commerce-content .commerce-card__image-link:hover::before,
.commerce-page .commerce-content .commerce-card__image-link:focus-visible::before {
  opacity: 0.5;
}

.commerce-page .commerce-content .commerce-card__image-link:hover .commerce-card__image-action,
.commerce-page .commerce-content .commerce-card__image-link:focus-visible .commerce-card__image-action {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .commerce-page .commerce-content .commerce-card__image-link img,
  .commerce-page .commerce-content .commerce-card__image-link::before,
  .commerce-page .commerce-content .commerce-card__image-action {
    transition: none;
  }
  .commerce-page .commerce-content .commerce-card__image-link:hover img,
  .commerce-page .commerce-content .commerce-card__image-link:focus-visible img {
    transform: none;
  }
}

.commerce-page .commerce-content .commerce-card__image-link:focus-visible {
  outline-offset: -4px;
}

.commerce-page .commerce-content .commerce-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 1.25rem;
}

.commerce-page .commerce-content .commerce-card__category {
  margin: 0 0 0.45rem;
  color: var(--theme-color);
  font: 800 0.76rem/1.35 Nunito, Arimo, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.commerce-page .commerce-content .commerce-card__title {
  margin: 0 0 0.55rem;
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: 700;
}

.commerce-page .commerce-content .commerce-card__title a {
  display: inline-block;
  border-radius: 3px;
  text-decoration: none;
}

.commerce-page .commerce-content .commerce-card__title a:hover {
  text-decoration: underline;
}

.commerce-page .commerce-content .commerce-card__description {
  margin: 0 0 1rem;
  color: var(--commerce-muted);
  line-height: 1.5;
}

.commerce-page .commerce-content .commerce-card__price {
  margin: auto 0 1.1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--commerce-border);
}

.commerce-page .commerce-content .commerce-card__price strong {
  color: var(--color1);
  white-space: nowrap;
}

.commerce-page .commerce-content .commerce-card__stock {
  display: block;
  color: var(--commerce-muted);
  font-size: 0.82rem;
}

.commerce-page .commerce-content .commerce-card__action {
  align-self: flex-start;
}

/* The store's one card style: white, rounded, faint border, no shadow. Only three things are cards: the cart's
   subtotal box, the checkout's order summary and the account's profile card (plus the shop's product cards).
   Everything else sits straight on the page. */
.commerce-page .commerce-content .commerce-panel {
  display: block;
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid #eeebe4;
  border-radius: 10px;
  background: var(--commerce-surface);
}

/* Drop the last paragraph's bottom margin so the space below the content matches the space above it. */
.commerce-page .commerce-content .commerce-panel > :last-child {
  margin-bottom: 0;
}


.commerce-page .commerce-content .commerce-alert--error,
.commerce-page .commerce-content .commerce-field-error,
.commerce-page .commerce-content [aria-invalid="true"] {
  color: var(--commerce-danger);
}


/* Messages share the fields' look: rounded, Nunito. Each type adds a pale tint,
   a soft border of the same colour and a Font Awesome icon (decorative, so its spoken text is ""). */
.commerce-page .commerce-content .commerce-alert {
  position: relative;
  margin: 0.75rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--commerce-border);
  border-radius: 10px;
  background: #fff;
  font: 600 1rem/1.4 Nunito, Arimo, sans-serif;
}

.commerce-page .commerce-content .commerce-alert:is(.commerce-alert--success, .commerce-alert--error, .commerce-alert--warning) {
  padding-left: 2.9rem;
}

.commerce-page .commerce-content .commerce-alert:is(.commerce-alert--success, .commerce-alert--error, .commerce-alert--warning)::before {
  position: absolute;
  top: 1.05rem;
  left: 1.1rem;
  font: 900 1.1rem/1 "Font Awesome 5 Free";
}

.commerce-page .commerce-content .commerce-alert--success {
  border-color: #a9cdb5;
  background: #eef6f0;
  color: var(--commerce-success);
}

.commerce-page .commerce-content .commerce-alert--success::before {
  content: "\f058";
  content: "\f058" / "";
}

.commerce-page .commerce-content .commerce-alert--error {
  border-color: #e3b3b6;
  background: #fbefef;
}

.commerce-page .commerce-content .commerce-alert--error::before {
  content: "\f06a";
  content: "\f06a" / "";
}

.commerce-page .commerce-content .commerce-alert--warning {
  border-color: #e5d3a3;
  background: #fbf5e6;
  color: #6f5410;
}

.commerce-page .commerce-content .commerce-alert--warning::before {
  content: "\f071";
  content: "\f071" / "";
}

/* Alerts that wrap a <p> (flash messages): keep the alert's colour and font and drop the
   paragraph's bottom margin so the text sits in the middle of the box. */
.commerce-page .commerce-content .commerce-alert > p,
.commerce-page .commerce-content .commerce-alert li {
  color: inherit;
  font: inherit;
}

.commerce-page .commerce-content .commerce-alert > :last-child {
  margin-bottom: 0;
}

/* "Please fix the following:" list: bullets (the theme removes them) sitting just under the intro line. */
.commerce-page .commerce-content .commerce-alert > p:not(:last-child) {
  margin-bottom: 0.25rem;
}

.commerce-page .commerce-content .commerce-alert > ul {
  margin: 0;
  padding-left: 1.2rem;
  list-style: disc;
}

/* Same soft red as the error message box; the dark red message under the field names the problem. */
.commerce-page .commerce-content [aria-invalid="true"] {
  border-color: #e3b3b6 !important;
}

/* The message under a form field or a cart quantity box. */
.commerce-page .commerce-content .commerce-field-error {
  display: block;
  margin: 0.25rem 0 0;
  font: 600 0.95rem/1.4 Nunito, Arimo, sans-serif;
}

/* Back link shown above a page's content; printed by back_link() in includes/helpers.php. */
.commerce-page .commerce-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  line-height: 1.4;
}

.commerce-page .commerce-back-link svg {
  display: block;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
}

.commerce-page .commerce-content .commerce-account .commerce-field-error {
  color: var(--commerce-danger);
  border: 0;
  padding: 0;
  background: none;
}

.commerce-page .commerce-content .commerce-muted {
  color: var(--commerce-muted);
}

.commerce-page .commerce-content .commerce-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.commerce-page .commerce-content table {
  max-width: 100%;
  border-collapse: collapse;
}

.commerce-page .commerce-content .commerce-table {
  width: 100%;
}

.commerce-page .commerce-content .commerce-table th:nth-child(2),
.commerce-page .commerce-content .commerce-table td:nth-child(2),
.commerce-page .commerce-content .commerce-table th:nth-child(4),
.commerce-page .commerce-content .commerce-table td:nth-child(4),
.commerce-page .commerce-content .commerce-table th:nth-child(5),
.commerce-page .commerce-content .commerce-table td:nth-child(5) {
  min-width: 6.5rem;
}

.commerce-page .commerce-content .commerce-table button {
  white-space: nowrap;
}

/* Centre each row so text lines up with the tall quantity box (e.g. Update and Remove). */
.commerce-page .commerce-content .commerce-table td {
  vertical-align: middle;
}

.commerce-page .commerce-content th,
.commerce-page .commerce-content td {
  padding: 0.65rem;
  border-bottom: 1px solid var(--commerce-border);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.commerce-page .commerce-content th {
  color: var(--color1);
  font-weight: 700;
}


.commerce-page .commerce-content .commerce-product-buy .form-group {
  margin-bottom: 1rem;
}

/* The theme sets its product form labels larger; these match the store's other form labels. */
.commerce-page .commerce-content .commerce-product-buy label {
  display: block;
  font-size: 1rem;
}

.commerce-page .commerce-content .commerce-product-buy select {
  width: 100%;
}

/* Quantity sits on one line with its label, as in the theme's product page. */
.commerce-page .commerce-content .commerce-product-buy .commerce-quantity-field {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.commerce-page .commerce-content .commerce-product-buy .commerce-quantity-field label {
  margin: 0;
}

/* Quantity box with − and + (product page and cart): one bordered control that looks like the other fields.
   The buttons are tap-sized (44px wide) and turn gold on hover like the other quiet buttons. */
.commerce-page .commerce-content .commerce-quantity {
  display: inline-flex;
  align-items: stretch;
  min-height: 3.25rem;
  border: 1px solid #e3ddcf;
  border-radius: 10px;
  background: var(--commerce-surface);
}

.commerce-page .commerce-content .commerce-quantity:has(input:focus) {
  border-color: var(--color1);
  box-shadow: 0 0 0 2px rgb(181 154 83 / 28%);
}

/* [name] makes this as specific as the general field rule, so this later rule wins. */
.commerce-page .commerce-content .commerce-quantity input[type="number"][name] {
  width: 3.25rem;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  appearance: textfield;
}

/* The site-wide keyboard focus outline (style.css) goes round the whole control, not just the number inside it.
   !important is needed to beat that rule's own !important. */
.commerce-page .commerce-content .commerce-quantity input[type="number"][name]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.commerce-page .commerce-content .commerce-quantity:has(input:focus-visible) {
  outline: 3px solid #181e40;
  outline-offset: 3px;
}

/* Hide the browser's own small arrows; − and + replace them. */
.commerce-page .commerce-content .commerce-quantity input::-webkit-outer-spin-button,
.commerce-page .commerce-content .commerce-quantity input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.commerce-page .commerce-content .commerce-quantity button {
  width: 2.75rem;
  min-height: 0;
  padding: 0;
  font-size: 0.8rem;
}

/* Icon only, so drop the quiet buttons' gap before a text label; otherwise the icon sits left of centre. */
.commerce-page .commerce-content .commerce-quantity button i {
  margin: 0;
}

.commerce-page .commerce-content .commerce-quantity button:disabled {
  color: var(--color1);
  opacity: 0.3;
  cursor: default;
}

/* Sold-out product: each option with its price, one per line. */
.commerce-page .commerce-content .commerce-option-list-title {
  margin: 1.5rem 0 0.25rem;
  color: var(--color1);
  font: 700 1rem/1.4 Nunito, Arimo, sans-serif;
}

.commerce-page .commerce-content .commerce-option-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.commerce-page .commerce-content .commerce-option-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  color: var(--color1);
  font: 600 1rem/1.4 Nunito, Arimo, sans-serif;
}

.commerce-page .commerce-content .commerce-option-list li + li {
  border-top: 1px solid var(--commerce-border);
}

/* Cart page. The lines sit straight on the page; the subtotal box is the only card. */
.commerce-page .commerce-content .commerce-cart-table thead th {
  padding-top: 0;
  padding-bottom: 0.75rem;
  color: var(--commerce-muted);
  font: 700 0.78rem/1.2 Nunito, Arimo, sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.commerce-page .commerce-content .commerce-cart-table :is(th, td) {
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

/* The shared table rule above gives some columns a minimum width for the invoice; the cart does not need it. */
.commerce-page .commerce-content .commerce-cart-table :is(th, td):nth-child(n) {
  min-width: 0;
}

/* The bin icon sits in its own narrow first column, just left of the product image. */
.commerce-page .commerce-content .commerce-cart-table .commerce-cart-remove {
  width: 1%;
  padding-right: 0;
}

.commerce-page .commerce-content .commerce-cart-remove form {
  margin: 0;
}

.commerce-page .commerce-content .commerce-cart-remove button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font-size: 1.05rem;
}

.commerce-page .commerce-content .commerce-cart-remove button i {
  margin: 0;
}

/* The same space under the title banner (and under a message) as the account pages (.commerce-account). */
.commerce-page .commerce-cart-page {
  padding-top: 2.5rem;
}

/* Cart line: image on the left; the name, option and unit price stack beside it, never under it.
   The cell is a <th>, which the store makes bold, so the weight is reset here; only the name is bold again. */
.commerce-page .commerce-content .commerce-cart-product {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 400;
}

.commerce-page .commerce-content .commerce-cart-product > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.commerce-page .commerce-content .commerce-cart-product a {
  color: var(--color1);
  font: 700 1.1rem/1.3 Nunito, Arimo, sans-serif;
}

.commerce-page .commerce-content .commerce-cart-product .commerce-muted {
  font-size: 0.95rem;
}

.commerce-page .commerce-content .commerce-cart-each {
  color: var(--commerce-muted);
  font-size: 0.9rem;
}

.commerce-page .commerce-content .commerce-cart-image {
  flex: 0 0 auto;
  width: 5rem;
  height: 5rem;
  border-radius: 6px;
  object-fit: cover;
}

.commerce-page .commerce-content .commerce-cart-total {
  color: var(--color1);
  font: 800 1.1rem/1.3 Nunito, Arimo, sans-serif;
  white-space: nowrap;
}

/* Under the lines, on the right: the one Update cart button, then the subtotal card. */
.commerce-page .commerce-content .commerce-cart-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 1rem;
}

.commerce-page .commerce-content .commerce-cart-bottom form {
  margin: 0;
}

.commerce-page .commerce-content .commerce-cart-summary {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 24rem;
}

.commerce-page .commerce-content .commerce-cart-summary p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.commerce-page .commerce-content .commerce-cart-subtotal {
  margin: 0;
}

.commerce-page .commerce-content .commerce-cart-subtotal > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
}

.commerce-page .commerce-content .commerce-cart-subtotal :is(dt, dd) {
  margin: 0;
  color: var(--color1);
  font: 800 1.15rem/1.4 Nunito, Arimo, sans-serif;
}

.commerce-page .commerce-content .commerce-cart-summary .commerce-button {
  display: block;
  width: 100%;
  padding: 0.9rem 1.25rem;
  text-align: center;
}

.commerce-page .commerce-content .commerce-cart-summary .simple-link {
  align-self: center;
  font-size: 0.95rem;
}

/* Below tablet width, each table row (cart lines, invoice items) becomes a stacked card,
   so the product name never gets squeezed into a narrow column. */
@media (max-width: 767.98px) {
  .commerce-page .commerce-content .commerce-table {
    display: block;
    min-width: 0;
  }

  .commerce-page .commerce-content .commerce-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .commerce-page .commerce-content .commerce-table tbody,
  .commerce-page .commerce-content .commerce-table tr,
  .commerce-page .commerce-content .commerce-table th,
  .commerce-page .commerce-content .commerce-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .commerce-page .commerce-content .commerce-table tr {
    margin-bottom: 1rem;
    padding: 0.65rem 0;
    border-top: 1px solid var(--commerce-border);
  }

  .commerce-page .commerce-content .commerce-table th,
  .commerce-page .commerce-content .commerce-table td {
    padding: 0.45rem 0;
    border: 0;
  }

  .commerce-page .commerce-content .commerce-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .commerce-page .commerce-content .commerce-table td::before {
    flex: 0 0 5.5rem;
    content: attr(data-label);
    color: var(--color1);
    font-weight: 700;
  }

  /* Cart rows are not label-and-value rows like the invoice's: the bin icon and product share the top row,
     the quantity and line total the second. */
  .commerce-page .commerce-content .commerce-cart-table tbody tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "remove product product"
      "quantity quantity total";
    align-items: center;
    margin-bottom: 0;
    padding: 1.1rem 0;
    border-top: 0;
    border-bottom: 1px solid var(--commerce-border);
  }

  .commerce-page .commerce-content .commerce-cart-table td::before {
    display: none;
  }

  .commerce-page .commerce-content .commerce-cart-table .commerce-cart-remove {
    grid-area: remove;
    width: auto;
    padding: 0;
  }

  .commerce-page .commerce-content .commerce-cart-remove button {
    margin-left: -0.6rem;
  }

  .commerce-page .commerce-content .commerce-cart-table tbody th {
    grid-area: product;
    padding: 0;
  }

  .commerce-page .commerce-content .commerce-cart-table .commerce-cart-quantity {
    grid-area: quantity;
    display: block;
    padding: 0.9rem 0 0;
  }

  .commerce-page .commerce-content .commerce-cart-table .commerce-cart-total {
    grid-area: total;
    width: auto;
    padding: 0.9rem 0 0;
  }

  .commerce-page .commerce-content .commerce-cart-bottom {
    align-items: stretch;
  }

  .commerce-page .commerce-content .commerce-cart-bottom form {
    align-self: flex-end;
  }

  .commerce-page .commerce-content .commerce-cart-summary {
    max-width: none;
  }
}

@media (max-width: 575.98px) {
  .commerce-page .commerce-content .commerce-panel {
    padding: 1.1rem;
  }
}


/* Reuse the existing site's responsive header, breakpoints and right-hand drawer. */
.commerce-page .commerce-responsive-header .rspn-mnu-btn,
.commerce-page .commerce-responsive-header .rspn-mnu-cls {
  padding: 0;
  border: 0;
  border-radius: 0;
  font-family: inherit;
}
.commerce-page .commerce-responsive-header .rsnp-mnu {
  overflow-y: auto;
}
.commerce-page .commerce-responsive-header .rsnp-mnu a[aria-current="page"] {
  color: var(--commerce-gold);
}
.commerce-page .commerce-navigation-fallback {
  padding: 1rem;
}
@media print {
  .commerce-page .commerce-responsive-header {
    display: none !important;
  }
}

/* Product detail follows the theme's product-detail.html: photo with name, price, stock and the
   buying form beside it, then category and description, and an "Other Products" sidebar. */

.commerce-page .commerce-product {
  padding-top: 2rem !important;
}

.commerce-page .commerce-product .wide-sec3 {
  min-width: 100%;
  margin-left: 0;
}

.commerce-page .commerce-product .prod-detail {
  min-width: 0;
}

.commerce-page .commerce-product .prod-detail-info-wrap {
  gap: 2rem;
}

.commerce-page .commerce-product .prod-detail-img {
  flex: 0 0 min(45%, 22rem);
  max-width: min(45%, 22rem);
  align-self: flex-start;
}

.commerce-page .commerce-product .prod-detail-img img {
  display: block;
  height: auto;
  border-radius: inherit;
}

.commerce-page .commerce-product .prod-detail-info {
  flex: 1 1 17rem;
  max-width: 100%;
  min-width: 0;
  margin-top: 0;
  padding: 0;
}

.commerce-page .commerce-product .prod-detail-info > p {
  margin: 0.75rem 0 0;
  line-height: 1.7;
}

.commerce-page .commerce-product .price-stock .price {
  color: var(--color1);
}

/* Plain words, coloured like the messages: green in stock, red out of stock. */
.commerce-page .commerce-product .commerce-stock--in {
  color: var(--commerce-success);
}

.commerce-page .commerce-product .commerce-stock--out {
  color: var(--commerce-danger);
}

.commerce-page .commerce-product .prod-detail-info > form {
  margin-top: 1.5rem;
}

.commerce-page .commerce-product-story {
  margin-top: 2.75rem;
  color: #555;
}

.commerce-page .commerce-product-story section {
  display: block;
  width: 100%;
}

.commerce-page .commerce-product-story section + section {
  margin-top: 1.75rem;
}

.commerce-page .commerce-product-story h2,
.commerce-page .commerce-product-story h3 {
  margin-bottom: 0.65rem;
  font-size: 1.5rem;
  font-weight: 900;
}

/* The description is HTML written by the maintainer: headings, paragraphs and a table of facts. */
.commerce-page .commerce-product-story * + h3 {
  margin-top: 1.75rem;
}

.commerce-page .commerce-product-story table {
  width: 100%;
  margin-top: 1.75rem;
  border-top: 1px solid var(--commerce-border);
}

.commerce-page .commerce-product-story th,
.commerce-page .commerce-product-story td {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--commerce-border);
  text-align: left;
}

.commerce-page .commerce-product-story th {
  width: 10rem;
  color: var(--color1);
}

/* Facts under the theme's "Additional Information" heading (wave line and dot), written in the description as
   <div class="additional-info"><h3 class="position-relative">Additional Information</h3><table>…</table></div>. */
.commerce-page .commerce-product-story .additional-info table {
  margin-top: 1.25rem;
}

.commerce-page .commerce-product-story p {
  margin: 0;
  line-height: 1.75;
}

.commerce-page .commerce-product-story p + p {
  margin-top: 0.9rem;
}

.commerce-page .commerce-product .sidebar {
  max-width: none;
  margin-left: 0;
}

.commerce-page .commerce-product .widget-title3 {
  font-size: 1.75rem;
  color: var(--color3);
  font-weight: 800;
}

/* "Other Products": the theme's sidebar box. Its desktop padding at every width; the theme's
   responsive.css shrinks it to 3rem 2rem below 1031px, which crowds the title's dot. */
.commerce-page .commerce-product .widget-box.v3 {
  padding: 3.125rem 2.8125rem;
}

/* The theme's mini-post list. Names are h3 for heading order; the theme sizes h5. */
.commerce-page .commerce-product .mini-post-box > a img {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
}

.commerce-page .commerce-product .mini-post-info > h3 {
  font-size: 1.125rem;
  line-height: 1.25rem;
  font-weight: 700;
}

.commerce-page .commerce-product .mini-post-info > h3 + span {
  margin-top: 7px;
}

.commerce-page .commerce-product .mini-post-info > .price {
  color: var(--color1);
}

@media (max-width: 767px) {
  .commerce-page .commerce-product {
    padding-bottom: 4rem !important;
  }

  .commerce-page .commerce-product .prod-detail-img,
  .commerce-page .commerce-product .prod-detail-info {
    flex-basis: 100%;
    max-width: 100%;
  }

}

/* Checkout and captured order documents use the same native form and table system. */
.commerce-page .commerce-checkout,
.commerce-page .commerce-order-page {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
/* Checkout. A back link and a two-step indicator share the top row. Below: the form on the left, laid out
   straight on the page, and the navy order summary on the right, which stays in view while scrolling. */
.commerce-page .commerce-checkout-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #eeebe4;
}
.commerce-page .commerce-steps {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.commerce-page .commerce-steps li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--commerce-muted);
  font: 700 0.95rem/1.3 Nunito, Arimo, sans-serif;
}
.commerce-page .commerce-steps li + li::before {
  width: 2.5rem;
  min-width: 1rem;
  height: 1px;
  margin-right: 0.15rem;
  background: var(--commerce-border);
  content: "";
}
.commerce-page .commerce-step-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid var(--commerce-border);
  border-radius: 50%;
  font-size: 0.85rem;
}
.commerce-page .commerce-steps li[aria-current="step"] {
  color: var(--color1);
}
.commerce-page .commerce-steps li[aria-current="step"] .commerce-step-mark {
  border-color: var(--commerce-gold);
  background: var(--commerce-gold);
  color: #fff;
}
.commerce-page .commerce-steps li.is-done .commerce-step-mark {
  border-color: var(--commerce-gold);
  color: var(--commerce-gold);
}
.commerce-page .commerce-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 25rem;
  gap: 4rem;
  align-items: start;
}
.commerce-page .commerce-checkout-layout > * {
  display: block;
  min-width: 0;
}
.commerce-page .commerce-content .commerce-checkout-main h2 {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
}
.commerce-page .commerce-content .commerce-checkout-hint {
  margin: 0 0 1.25rem;
  color: var(--commerce-muted);
  font-size: 0.92rem;
}
.commerce-page .commerce-checkout-part + .commerce-checkout-part {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #eeebe4;
}
.commerce-page .commerce-content .commerce-checkout-part > p {
  margin: 0.5rem 0 0;
  max-width: 38rem;
  line-height: 1.65;
}
.commerce-page .commerce-content .commerce-checkout-part > .commerce-checkout-hint {
  margin: 0.75rem 0 0;
}
.commerce-page .commerce-checkout-part-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.commerce-page .commerce-content .commerce-checkout-part-head button {
  flex: 0 0 auto;
  white-space: nowrap;
}
.commerce-page .commerce-checkout-address {
  margin: 0.5rem 0 0;
  font-style: normal;
  line-height: 1.65;
}
.commerce-page .commerce-checkout-address strong {
  color: var(--color1);
}
.commerce-page .commerce-checkout-actions {
  margin: 2rem 0 0;
}
.commerce-page .commerce-content .commerce-checkout-actions button {
  min-width: 14rem;
  min-height: 3.5rem;
}
.commerce-page .commerce-checkout-summary {
  position: sticky;
  top: 7rem;
  padding: 1.75rem;
  border: 1px solid #eeebe4;
  border-radius: 10px;
  background: var(--commerce-surface);
}
.commerce-page .commerce-content .commerce-checkout-summary h2 {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
}
.commerce-page .commerce-summary-items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.commerce-page .commerce-summary-items li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--commerce-border);
}
.commerce-page .commerce-summary-items img {
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 6px;
  object-fit: cover;
}
.commerce-page .commerce-summary-name {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.92rem;
}
.commerce-page .commerce-summary-name strong,
.commerce-page .commerce-summary-price {
  color: var(--color1);
  font: 700 1rem/1.35 Nunito, Arimo, sans-serif;
}
.commerce-page .commerce-summary-price {
  flex-shrink: 0;
}
.commerce-page .commerce-checkout-totals {
  margin: 1rem 0 0;
}
.commerce-page .commerce-checkout-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
}
.commerce-page .commerce-checkout-totals dt {
  font-weight: 400;
}
.commerce-page .commerce-checkout-totals dd {
  margin: 0;
  color: var(--color1);
  text-align: right;
}
.commerce-page .commerce-checkout-totals .commerce-checkout-total {
  margin-top: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--commerce-border);
}
.commerce-page .commerce-checkout-totals .commerce-checkout-total :is(dt, dd) {
  color: var(--color1);
  font: 900 1.4rem/1.3 Nunito, Arimo, sans-serif;
}
.commerce-page .commerce-content .commerce-checkout-note {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
}
.commerce-page .commerce-content a.commerce-checkout-edit {
  margin-top: 1.25rem;
}
.commerce-page .commerce-order-totals {
  margin: 1.25rem 0 2rem auto;
  max-width: 28rem;
}
.commerce-page .commerce-order-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
}
.commerce-page .commerce-order-totals dt {
  font-weight: 400;
}
.commerce-page .commerce-order-totals dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}
.commerce-page .commerce-order-totals .commerce-order-total {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--commerce-border);
  color: var(--commerce-ink);
  font-size: 1.2rem;
  font-weight: 700;
}
.commerce-page .commerce-order-total dt {
  font-weight: 700;
}
/* The invoice is a white sheet with a letterhead: logo and contact details on the left; the title, reference
   and dates on the right, sharing one right edge. Totals and payment details sit side by side at the foot.
   In the markup the totals come first, so the email (one column) and phones show them before the bank details. */
.commerce-page .commerce-invoice {
  max-width: 56rem;
  margin-top: 2rem;
  padding: 3rem;
  border: 1px solid #eeebe4;
  border-radius: 4px;
  background: var(--commerce-surface);
  color: var(--commerce-ink);
  overflow-wrap: anywhere;
}
.commerce-page .commerce-invoice-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 3px solid var(--commerce-gold);
}
.commerce-page .commerce-invoice-from img {
  display: block;
  width: auto;
  height: 64px;
}
.commerce-page .commerce-content .commerce-invoice-from p {
  margin: 0.75rem 0 0;
  color: var(--commerce-muted);
  font-size: 0.9rem;
}
.commerce-page .commerce-invoice-title {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.commerce-page .commerce-content .commerce-invoice-title h2 {
  margin: 0 0 0.75rem;
  font-size: 2.4rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.commerce-page .commerce-document-meta {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.3rem 1.5rem;
  margin: 0;
  font-size: 0.95rem;
}
.commerce-page .commerce-document-meta > div {
  display: contents;
}
.commerce-page .commerce-document-meta dt {
  color: var(--commerce-muted);
  font-weight: 600;
}
.commerce-page .commerce-document-meta dd {
  margin: 0;
  color: var(--commerce-ink);
  font: 700 0.95rem/1.5 Nunito, Arimo, sans-serif;
  text-align: right;
}
.commerce-page .commerce-document-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}
.commerce-page .commerce-content .commerce-document-columns h3 {
  margin-bottom: 0.5rem;
  color: var(--commerce-muted);
  font: 700 0.75rem/1.2 Nunito, Arimo, sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.commerce-page .commerce-content .commerce-document-columns p {
  margin: 0;
  line-height: 1.65;
}
.commerce-page .commerce-invoice h3 {
  font-size: 1.25rem;
}
.commerce-page .commerce-content .commerce-invoice-items thead th {
  padding: 0.8rem 0.75rem;
  border: 0;
  background: var(--commerce-navy);
  color: #fff;
  font: 700 0.75rem/1.2 Nunito, Arimo, sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.commerce-page .commerce-content .commerce-invoice-items tbody th,
.commerce-page .commerce-content .commerce-invoice-items td {
  padding: 0.85rem 0.75rem;
  border-bottom: 1px solid #eeebe4;
}
.commerce-page .commerce-content .commerce-invoice-items tbody tr:nth-child(even) {
  background: #faf8f3;
}
.commerce-page .commerce-content .commerce-invoice-items th {
  font-weight: 600;
}
.commerce-page .commerce-content .commerce-invoice-items tbody th .commerce-muted {
  font-weight: 400;
}
.commerce-page .commerce-content .commerce-invoice-items td {
  white-space: nowrap;
}
.commerce-page .commerce-content .commerce-invoice-items td:last-child,
.commerce-page .commerce-content .commerce-invoice-items thead th:last-child {
  text-align: right;
}
.commerce-page .commerce-invoice-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 2.5rem;
  align-items: start;
  margin-top: 1.75rem;
}
.commerce-page .commerce-invoice-bottom .commerce-order-totals {
  grid-column: 2;
  grid-row: 1;
  max-width: none;
  margin: 0;
}
.commerce-page .commerce-invoice-bottom .commerce-order-totals .commerce-order-total {
  padding: 0.9rem 1rem;
  border: 0;
  border-radius: 6px;
  background: var(--commerce-navy);
}
.commerce-page .commerce-invoice-bottom .commerce-order-total :is(dt, dd) {
  color: #fff;
}
.commerce-page .commerce-bank-details {
  display: block;
  grid-column: 1;
  grid-row: 1;
  padding: 1.25rem 1.5rem;
  border: 1px solid #e3ddcf;
  border-radius: 8px;
  background: #fdfbf6;
}
.commerce-page .commerce-content .commerce-bank-details h3 {
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
}
.commerce-page .commerce-content .commerce-bank-details p {
  margin: 0 0 0.6rem;
}
.commerce-page .commerce-content .commerce-bank-details p:last-child {
  margin-bottom: 0;
}
.commerce-page .commerce-invoice-ref {
  padding: 0.1rem 0.55rem;
  border-radius: 4px;
  background: #f4efe1;
  color: var(--color1);
  letter-spacing: 0.03em;
}
.commerce-page .commerce-content .commerce-invoice-note {
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid #eeebe4;
  color: var(--commerce-muted);
  font-size: 0.88rem;
  text-align: center;
}
/* The totals and payment box sit side by side until the invoice itself is narrower than about 38rem
   (on phones, or beside the admin page's side column on a smaller laptop); then the payment box goes under
   the totals instead of being squeezed into a tall strip. */
.commerce-page .commerce-invoice {
  container: invoice / inline-size;
}
@container invoice (max-width: 38rem) {
  .commerce-page .commerce-invoice-bottom {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
  .commerce-page .commerce-invoice-bottom .commerce-order-totals,
  .commerce-page .commerce-invoice-bottom .commerce-bank-details {
    grid-column: 1;
    grid-row: auto;
  }
}
/* The customer's order page: the back link and "Continue shopping" share a row, then a block as wide as the
   invoice with the status pill (the same tints as the admin pages) and what to do next as its heading. The text
   keeps to about 65 characters a line. "Print invoice" is a quiet link right above the invoice it prints. */
.commerce-page .commerce-content .commerce-order-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  max-width: 56rem;
  margin-bottom: 0.75rem;
}
.commerce-page .commerce-content .commerce-order-summary {
  max-width: 56rem;
}
.commerce-page .commerce-order-summary-text {
  max-width: 38rem;
}
.commerce-page .commerce-content .commerce-order-summary-text h2 {
  margin: 0.6rem 0 0.4rem;
  font-size: 1.5rem;
}
.commerce-page .commerce-content .commerce-order-summary-text p {
  margin: 0.6rem 0 0;
}
.commerce-page .commerce-content .commerce-order-summary-text h2 + p {
  margin-top: 0;
}
.commerce-page .commerce-content .commerce-invoice-tools {
  display: flex;
  justify-content: flex-end;
  max-width: 56rem;
  margin-top: 1.5rem;
}
.commerce-page .commerce-content .commerce-invoice-tools + .commerce-invoice {
  margin-top: 0.5rem;
}
.commerce-page .commerce-content .commerce-invoice-tools noscript p {
  margin: 0;
}
/* The customer order page centres its content at the invoice's width. */
.commerce-page .commerce-order-page .commerce-invoice,
.commerce-page .commerce-content .commerce-order-summary,
.commerce-page .commerce-content .commerce-order-nav,
.commerce-page .commerce-order-page .commerce-invoice-tools {
  margin-right: auto;
  margin-left: auto;
}
@media (max-width: 991px) {
  .commerce-page .commerce-checkout-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
  .commerce-page .commerce-checkout-summary {
    position: static;
  }
  /* On the review step the customer checks the items first, then places the order. */
  .commerce-page .commerce-checkout-layout--review .commerce-checkout-summary {
    order: -1;
  }
}
@media (max-width: 575px) {
  .commerce-page .commerce-checkout-top,
  .commerce-page .commerce-steps {
    width: 100%;
  }
  .commerce-page .commerce-steps li + li::before {
    flex: 1;
  }
  .commerce-page .commerce-content .commerce-checkout-actions button {
    width: 100%;
  }
  .commerce-page .commerce-checkout-summary {
    padding: 1.25rem;
  }
}
@media (max-width: 767px) {
  .commerce-page .commerce-invoice {
    padding: 1.5rem;
  }
  .commerce-page .commerce-invoice-title {
    align-items: flex-start;
  }
  .commerce-page .commerce-document-meta dd {
    text-align: left;
  }
  .commerce-page .commerce-document-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
  .commerce-page .commerce-content .commerce-invoice-items thead {
    display: none;
  }
  .commerce-page .commerce-content .commerce-invoice-items,
  .commerce-page .commerce-content .commerce-invoice-items tbody,
  .commerce-page .commerce-content .commerce-invoice-items tr,
  .commerce-page .commerce-content .commerce-invoice-items tbody th,
  .commerce-page .commerce-content .commerce-invoice-items td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .commerce-page .commerce-content .commerce-invoice-items tr {
    padding: 1rem 0;
    border-bottom: 1px solid var(--commerce-border);
  }
  .commerce-page .commerce-content .commerce-invoice-items tbody th,
  .commerce-page .commerce-content .commerce-invoice-items td,
  .commerce-page .commerce-content .commerce-invoice-items td:last-child {
    border: 0;
    padding: 0.35rem 0;
    text-align: left;
    white-space: normal;
  }
  .commerce-page .commerce-content .commerce-invoice-items td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }
  .commerce-page .commerce-content .commerce-invoice-items td::before {
    content: attr(data-label);
    font-weight: 600;
  }
}
@media print {
  .commerce-page > header,
  .commerce-page > footer,
  .commerce-page .sticky-menu,
  .commerce-page .commerce-skip-link,
  .commerce-page .commerce-banner,
  .commerce-page .commerce-no-print {
    display: none !important;
  }
  .commerce-page .commerce-content,
  .commerce-page .commerce-order-page {
    padding: 0;
    margin: 0;
  }
  .commerce-page .commerce-order-page {
    max-width: none;
    width: 100%;
  }
  .commerce-page .commerce-invoice {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .commerce-page .commerce-content .commerce-invoice-items thead th {
    background: none;
    color: var(--commerce-navy);
    border-bottom: 2px solid var(--commerce-navy);
  }
  .commerce-page .commerce-content .commerce-invoice-items tbody tr:nth-child(even),
  .commerce-page .commerce-bank-details,
  .commerce-page .commerce-invoice-ref {
    background: none;
  }
  .commerce-page .commerce-invoice-ref {
    padding: 0;
  }
  .commerce-page .commerce-admin-order-layout {
    display: block;
  }
  .commerce-page .commerce-order-page .commerce-admin-order-doc .commerce-invoice {
    padding: 0;
  }
  .commerce-page .commerce-invoice-bottom .commerce-order-totals .commerce-order-total {
    padding: 0.75rem 0 0;
    border-top: 2px solid var(--commerce-navy);
    border-radius: 0;
    background: none;
  }
  .commerce-page .commerce-invoice-bottom .commerce-order-total :is(dt, dd) {
    color: var(--commerce-navy);
  }
  .commerce-page .commerce-invoice h3,
  .commerce-page .commerce-content .commerce-invoice-items tr,
  .commerce-page .commerce-invoice-bottom {
    break-inside: avoid;
  }
  .commerce-page {
    font-size: 11pt;
  }
}

/* Quantity controls retain individual accessible names without repeated desktop labels. */
.commerce-page .commerce-content .commerce-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Account forms reuse the site's typography, surfaces and native controls. */
/* The single-form pages (sign in, create account, forgot and new password, confirm email) sit on the page,
   left-aligned like the rest of the site; the width limit keeps the fields from stretching across it. */
.commerce-page .commerce-content .commerce-form-card {
  max-width: 34rem;
}
.commerce-page .commerce-form-card .commerce-account-intro {
  margin-bottom: 1.5rem;
}
.commerce-page .commerce-form-card > :last-child,
.commerce-page .commerce-form-card .commerce-account-intro > p {
  margin-bottom: 0;
}
.commerce-page .commerce-content .commerce-field-hint {
  margin: -0.6rem 0 1.1rem;
  color: var(--commerce-muted);
  font-size: 0.9rem;
}
.commerce-page .commerce-account {
  padding-top: 2.5rem;
  padding-bottom: 5rem;
}
.commerce-page .commerce-account-intro {
  max-width: 42rem;
  margin-bottom: 2rem;
}
.commerce-page .commerce-account-form {
  max-width: 36rem;
}
.commerce-page .commerce-form-field {
  margin-bottom: 1.1rem;
}
.commerce-page .commerce-form-field label,
.commerce-page .commerce-form-field input,
.commerce-page .commerce-form-field select,
.commerce-page .commerce-form-field textarea {
  display: block;
  width: 100%;
}
.commerce-page .commerce-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.25rem;
}
.commerce-page .commerce-account h2 {
  font-size: 1.75rem;
}
.commerce-page .commerce-content .commerce-account button:disabled {
  background: #e0e0e0;
  border: 1px solid #c4c4c4;
  color: var(--commerce-muted);
  opacity: 1;
}
.commerce-page .commerce-account button:disabled::before,
.commerce-page .commerce-account button:disabled::after {
  display: none;
}
.commerce-page .commerce-account-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 1.5rem;
}

/* Account page: a navy profile card with a menu of the page's sections on the left (it stays in view while
   scrolling), and the orders and the forms on the right, laid out straight on the page. On tablets and phones
   the profile card goes on top and the menu stays a list, one link per line. */
.commerce-page .commerce-account-layout {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
.commerce-page .commerce-content .commerce-account-side {
  padding: 0;
}
.commerce-page .commerce-account-side {
  position: sticky;
  top: 7rem;
  overflow: hidden;
}
.commerce-page .commerce-account-who {
  padding: 1.5rem;
  background: var(--commerce-navy);
  color: #c9cbd8;
  overflow-wrap: anywhere;
}
.commerce-page .commerce-account-initials {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  margin-bottom: 0.85rem;
  border-radius: 50%;
  background: var(--commerce-gold);
  color: #fff;
  font: 900 1.25rem Nunito, Arimo, sans-serif;
}
.commerce-page .commerce-account-who strong {
  display: block;
  color: #fff;
  font-size: 1.15rem;
}
.commerce-page .commerce-account-menu {
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
}
/* Menu icons are gold markers beside their labels, as in the site header. */
.commerce-page .commerce-content .commerce-account-menu a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  color: var(--commerce-ink);
  font: 700 0.95rem Nunito, Arimo, sans-serif;
  text-decoration: none;
}
.commerce-page .commerce-content .commerce-account-menu a:is(:hover, :focus-visible) {
  background: #faf8f3;
  color: var(--commerce-ink);
}
.commerce-page .commerce-account-menu i {
  width: 1.1rem;
  color: var(--commerce-gold);
  text-align: center;
}
.commerce-page .commerce-account-side form {
  margin: 0;
  padding: 0.75rem 1.5rem 1.25rem;
  border-top: 1px solid #eeebe4;
}
.commerce-page .commerce-content .commerce-account-card {
  scroll-margin-top: 7rem;
}
.commerce-page .commerce-account-card + .commerce-account-card {
  margin-top: 1.75rem;
}
.commerce-page .commerce-content .commerce-account-card > h2 {
  margin: 0 0 1.25rem;
  font-size: 1.35rem;
}
/* "Your details" holds three forms, split by thin lines. Each has a small heading, a hint right under it,
   and its save button on the left under the last field, in reading order. */
.commerce-page .commerce-content .commerce-account-part {
  display: block;
  scroll-margin-top: 7rem;
}
.commerce-page .commerce-account-part + .commerce-account-part {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid #eeebe4;
}
.commerce-page .commerce-content .commerce-account-part h3 {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
}
.commerce-page .commerce-content .commerce-account-hint {
  margin: 0 0 1rem;
  color: var(--commerce-muted);
  font-size: 0.92rem;
}
.commerce-page .commerce-content .commerce-account-part button {
  margin-top: 0.25rem;
}
/* Deleting an account is rare, so it is a plain section after the forms. A thin line splits it from them, as
   the lines split the forms from each other. */
.commerce-page .commerce-content .commerce-account-delete {
  display: block;
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid #eeebe4;
  scroll-margin-top: 7rem;
}
.commerce-page .commerce-content .commerce-account-delete h2 {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
}
/* The orders list borrows the admin order table's look. */
.commerce-page .commerce-content .commerce-admin-table.commerce-account-orders {
  margin-bottom: 0;
}
/* After the 5 newest orders, a bar across the foot of the table shows or hides the older ones. While it
   shows, the last order row keeps its line so the bar stays separate. */
.commerce-page .commerce-account-orders:has(tfoot:not([hidden])) tbody tr:last-child > * {
  border-bottom: 1px solid #eeebe4;
}
.commerce-page .commerce-account-orders tfoot td {
  padding: 0;
  border: 0;
  background: #faf9f6;
}
.commerce-page .commerce-content .commerce-account-orders .commerce-account-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 3.2rem;
  font: 700 0.95rem/1.2 Nunito, Arimo, sans-serif;
}
.commerce-page .commerce-content .commerce-account-orders .commerce-account-more i {
  margin: 0;
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}
.commerce-page .commerce-account-more[aria-expanded="true"] i {
  transform: rotate(180deg);
}
/* The theme's overflow-x: hidden on html and body would stop the side card staying in view; clip hides
   sideways overflow the same way without that side effect. Only store pages are affected. */
html:has(> body.commerce-page),
body.commerce-page {
  overflow-x: clip;
}
@media (max-width: 991px) {
  .commerce-page .commerce-account-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
  .commerce-page .commerce-account-side {
    position: static;
  }
}

/* Administration shares the storefront shell and native form controls. */
.commerce-page .commerce-admin {
  padding-bottom: 3rem;
}
.commerce-page .commerce-admin-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.commerce-page .commerce-admin-title h1 {
  margin-bottom: 0.35rem;
}
.commerce-page .commerce-admin-title p {
  margin: 0;
}
/* One order (admin): "← All orders" and Sign out share a row, then the reference and who placed it. From
   992px wide, the invoice is on the left and a side column on the right holds the block whose heading is the
   next job (with its buttons), then Customer and History; the side column stays in view while scrolling.
   Narrower than that, it is one column with the side column first. */
.commerce-page .commerce-content .commerce-admin .commerce-order-nav {
  max-width: none;
}
.commerce-page .commerce-admin-order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 2rem;
  align-items: start;
}
.commerce-page .commerce-admin-order-doc {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.commerce-page .commerce-admin-order-side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 7rem;
}
.commerce-page .commerce-content .commerce-admin-order-side .commerce-order-summary,
.commerce-page .commerce-order-page .commerce-admin-order-doc .commerce-invoice,
.commerce-page .commerce-order-page .commerce-admin-order-doc .commerce-invoice-tools {
  max-width: none;
  margin: 0;
}
.commerce-page .commerce-order-page .commerce-admin-order-doc .commerce-invoice {
  padding: 2.5rem;
}
.commerce-page .commerce-order-page .commerce-admin-order-doc .commerce-invoice-tools {
  margin-bottom: 0.5rem;
}
.commerce-page .commerce-content .commerce-admin-order-side .commerce-order-summary-text h2 {
  font-size: 1.3rem;
}
.commerce-page .commerce-admin-order-side .commerce-admin-panels {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin: 0;
}
@media (max-width: 991px) {
  .commerce-page .commerce-admin-order-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .commerce-page .commerce-admin-order-side,
  .commerce-page .commerce-admin-order-doc {
    grid-column: 1;
    grid-row: auto;
  }
  .commerce-page .commerce-admin-order-side {
    position: static;
  }
}
.commerce-page .commerce-content .commerce-order-nav form {
  margin: 0;
}
.commerce-page .commerce-content .commerce-admin-order-title h1 {
  margin: 0 0 0.25rem;
}
.commerce-page .commerce-content .commerce-admin-order-title p {
  margin: 0 0 1.25rem;
  color: var(--commerce-muted);
}
.commerce-page .commerce-content .commerce-order-summary .commerce-admin-actions {
  align-items: center;
  margin-top: 1.25rem;
}
.commerce-page .commerce-content .commerce-admin-resend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: 1.25rem 0 0;
}
.commerce-page .commerce-content .commerce-admin-resend form {
  margin: 0;
}
/* Orders list header: "Signed in as" and Sign out on one line under the title; the order count sits beside
   the status filter, since it counts what the filter shows. */
.commerce-page .commerce-admin-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1rem;
}
.commerce-page .commerce-admin-who p,
.commerce-page .commerce-admin-who form {
  margin: 0;
}
.commerce-page .commerce-admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.5rem;
}
.commerce-page .commerce-admin-toolbar .commerce-admin-filter {
  margin-bottom: 0;
}
/* Status filter: pill-shaped tabs; the chosen one is a white pill. No hover change: the selected pill and
   the pointer already show they are links. ".commerce-content" makes this beat the general link hover colour. */
.commerce-page .commerce-admin-filter {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: #f4f2ed;
}
.commerce-page .commerce-content .commerce-admin-filter a {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  color: var(--commerce-ink);
  font: 600 0.92rem/1.2 Nunito, Arimo, sans-serif;
  text-decoration: none;
}
.commerce-page .commerce-content .commerce-admin-filter a[aria-current="page"] {
  color: var(--commerce-navy);
  background: #fff;
}

/* Order list: a rounded table with a faint outline and a navy header row, like the theme's own calendar table. */
.commerce-page .commerce-content .commerce-admin-table {
  width: 100%;
  margin-bottom: 1.5rem;
  text-align: left;
  border: 1px solid #eeebe4;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.commerce-page .commerce-admin-table th,
.commerce-page .commerce-admin-table td {
  padding: 1rem 1.2rem;
  vertical-align: middle;
  border-bottom: 1px solid #eeebe4;
  overflow-wrap: anywhere;
}
.commerce-page .commerce-admin-table tbody tr:last-child > * {
  border-bottom: 0;
}
.commerce-page .commerce-admin-table thead th {
  padding: 0.9rem 1.2rem;
  border: 0;
  color: #fff;
  background: var(--commerce-navy);
  font: 700 0.78rem/1.2 Nunito, Arimo, sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.commerce-page .commerce-admin-table tbody th a {
  color: var(--color1);
  font: 800 1.05rem/1.2 Nunito, Arimo, sans-serif;
  text-decoration: none;
}
.commerce-page .commerce-admin-table tbody th small {
  display: block;
  margin-top: 0.35rem;
  color: var(--commerce-muted);
  font: 400 0.85rem/1.3 Arimo, Arial, sans-serif;
}
.commerce-page .commerce-admin-table .commerce-admin-amount {
  text-align: right;
  white-space: nowrap;
}
.commerce-page .commerce-admin-table td.commerce-admin-amount {
  color: var(--color1);
  font: 700 1rem/1.2 Nunito, Arimo, sans-serif;
}
.commerce-page .commerce-admin-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.commerce-page .commerce-content .commerce-admin-panel h2 {
  display: block;
  font-size: 1.35rem;
  margin-bottom: 1rem;
}
.commerce-page .commerce-admin-panel p:last-child {
  margin-bottom: 0;
}
.commerce-page .commerce-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.commerce-page .commerce-admin-actions form {
  margin: 0;
}
.commerce-page .commerce-admin-actions + .commerce-alert {
  margin-top: 1rem;
}
/* The status pill and the small notes beside it ("Waiting 3 days", "Invoice not sent") share one shape and
   height. The notes keep a transparent border so they stay exactly as tall as the pill. */
.commerce-page .commerce-admin-state,
.commerce-page .commerce-admin-chip {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 1.85rem;
  margin: 0.2rem 0.35rem 0.2rem 0;
  padding: 0 0.8rem;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 700 0.85rem/1.2 Nunito, Arimo, sans-serif;
}
/* The page prints data-status; each status gets a pale tint like the site's messages. */
.commerce-page .commerce-admin-state {
  border-color: var(--commerce-border);
  color: var(--commerce-navy);
  background: #f7f5f0;
}
.commerce-page .commerce-admin-state[data-status="Pending Payment"] {
  border-color: #ead7a3;
  color: #7a5a12;
  background: #fbf3df;
}
.commerce-page .commerce-admin-state[data-status="Processing"] {
  border-color: #c7cfe6;
  color: var(--commerce-navy);
  background: #e8ecf7;
}
.commerce-page .commerce-admin-state[data-status="Shipped"] {
  border-color: #b9dcc6;
  color: var(--commerce-success);
  background: #e4f2e9;
}
.commerce-page .commerce-admin-state[data-status="Cancelled"] {
  border-color: #dcd7cf;
  color: #6b6660;
  background: #f2f0ed;
}
.commerce-page .commerce-admin-chip {
  color: #5f5a52;
  background: #f7f5f0;
  font-weight: 600;
}
/* A clock before "Waiting" (Font Awesome's regular clock icon, already loaded by the site). */
.commerce-page .commerce-admin-chip::before {
  content: "\f017";
  margin-right: 0.4rem;
  font: 400 0.9em/1 "Font Awesome 5 Free";
}
/* "Invoice not sent": red, with Font Awesome's exclamation circle instead of the clock. */
.commerce-page .commerce-admin-chip--alert {
  color: var(--commerce-danger);
  background: #fbe9ea;
}
.commerce-page .commerce-admin-chip--alert::before {
  content: "\f06a";
  font-weight: 900;
}
.commerce-page .commerce-admin-history {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* History is a short timeline: a gold dot per event, joined by a thin line. */
.commerce-page .commerce-admin-history li {
  position: relative;
  padding: 0 0 1.1rem 1.6rem;
}
.commerce-page .commerce-admin-history li::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  left: 0.25rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--commerce-gold);
}
.commerce-page .commerce-admin-history li::after {
  content: "";
  position: absolute;
  top: 1.2rem;
  bottom: 0;
  left: 0.57rem;
  width: 1px;
  background: #e3ddcf;
}
.commerce-page .commerce-admin-history li:last-child {
  padding-bottom: 0;
}
.commerce-page .commerce-admin-history li:last-child::after {
  display: none;
}
.commerce-page .commerce-admin-history strong,
.commerce-page .commerce-admin-history span {
  display: block;
}
.commerce-page .commerce-admin-history strong {
  color: var(--commerce-ink);
}
.commerce-page .commerce-admin-history span {
  color: var(--commerce-muted);
  font-size: 0.92rem;
}
.commerce-page .commerce-admin button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
@media (max-width: 767px) {
  .commerce-page .commerce-admin-panels {
    grid-template-columns: minmax(0, 1fr);
  }
  /* On phones the filter becomes separate chips that wrap neatly; the chosen one is navy. */
  .commerce-page .commerce-admin-filter {
    display: flex;
    gap: 0.5rem;
    padding: 0;
    border-radius: 0;
    background: none;
  }
  .commerce-page .commerce-content .commerce-admin-filter a {
    background: #f4f2ed;
  }
  .commerce-page .commerce-content .commerce-admin-filter a[aria-current="page"] {
    color: #fff;
    background: var(--commerce-navy);
  }
  /* On phones each order becomes its own card. */
  .commerce-page .commerce-admin-table thead {
    display: none;
  }
  .commerce-page .commerce-content .commerce-admin-table,
  .commerce-page .commerce-admin-table tbody,
  .commerce-page .commerce-admin-table tr,
  .commerce-page .commerce-admin-table th,
  .commerce-page .commerce-admin-table td {
    display: block;
    width: 100%;
  }
  .commerce-page .commerce-content .commerce-admin-table {
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }
  .commerce-page .commerce-admin-table tbody tr {
    margin-bottom: 0.9rem;
    padding: 1rem 1.1rem;
    border: 1px solid #eeebe4;
    border-radius: 10px;
    background: #fff;
  }
  .commerce-page .commerce-admin-table th,
  .commerce-page .commerce-admin-table td,
  .commerce-page .commerce-admin-table .commerce-admin-amount {
    padding: 0.3rem 0;
    border: 0;
    text-align: left;
  }
  .commerce-page .commerce-admin-table tbody th {
    margin-bottom: 0.4rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #eeebe4;
  }
  .commerce-page .commerce-admin-table td::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    color: var(--commerce-navy);
  }
  /* The older-orders bar becomes a rounded outline button under the order cards. */
  .commerce-page .commerce-account-orders tfoot,
  .commerce-page .commerce-account-orders tfoot tr {
    display: block;
  }
  .commerce-page .commerce-account-orders tfoot td {
    border: 1px solid #eeebe4;
    border-radius: 10px;
    background: #fff;
  }
  .commerce-page .commerce-account-orders tfoot td::before {
    content: none;
  }
}
@media (max-width: 767px) {
  .commerce-page .commerce-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* "Buy this product" link pasted into blog articles. It is not scoped to .commerce-page,
   because the articles are static pages that only load this file for this rule. */
.commerce-buy-link {
  display: inline-block;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--theme-color, #b59a53);
  border-radius: 5px;
  background: var(--theme-color, #b59a53);
  color: #fff;
  font: 700 0.95rem/1.35 Nunito, Arimo, sans-serif;
  text-decoration: none;
  transition: background-color 0.3s, border-color 0.3s;
}

.commerce-buy-link:is(:hover, :focus-visible) {
  border-color: var(--secondary-color, #181e40);
  background: var(--secondary-color, #181e40);
  color: #fff;
}