/* ==========================================================================
   Saint Society Scrubs - WooCommerce layer
   --------------------------------------------------------------------------
   Woo's own stylesheets are dequeued in inc/enqueue.php, so this file is not
   overriding anything, it is the only styling Woo markup gets. That means no
   !important anywhere in here: if a rule is not applying, the selector is
   wrong, not the specificity.

   Woo's SCRIPTS all stay loaded. The class names below are the ones those
   scripts add and remove, so renaming them breaks behaviour, not just looks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cart drawer
   The shell lives in components.css as .panel--cart. Everything here is the
   contents, which Woo replaces wholesale through the cart fragments.
   -------------------------------------------------------------------------- */

/* Woo swaps this node, so it has to be the flex column itself. If it were a
   plain wrapper the panel head, body and foot would stop being flex children
   and the body would lose its scroll. */
.js-cart-contents {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.cart-drawer__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  text-align: center;
}

.cart-drawer__mark {
  opacity: 0.4;
}

.cart-drawer__shipping {
  flex: none;
  padding: 1.5rem var(--spacing-gutter) 0;
}

.cart-drawer__meter {
  margin-top: 0.75rem;
  height: 1px;
  width: 100%;
  background: var(--color-rule);
}

.cart-drawer__meter span {
  display: block;
  height: 1px;
  background: var(--color-gold);
  transition: width var(--duration-base) var(--ease-luxe);
}

.cart-lines {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cart-line {
  display: flex;
  gap: 1rem;
}

.cart-line__media {
  display: block;
  flex: none;
  width: 88px;
  overflow: hidden;
  background: var(--color-onyx-raised);
  aspect-ratio: 4 / 5;
}

.cart-line__media img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.cart-line__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.cart-line__top {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.cart-line__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-ink);
}

/* Woo prints variation data as a dl. Flatten it to one quiet line rather
   than a definition list stack, which is four lines tall for two attributes. */
.cart-line__meta {
  margin-top: 0.375rem;
  color: var(--color-ink-muted);
}

.cart-line__meta dl,
.cart-line__meta dt,
.cart-line__meta dd,
.cart-line__meta p {
  display: inline;
  margin: 0;
}

.cart-line__meta dd::after {
  content: ' / ';
  color: var(--color-ink-faint);
}

.cart-line__meta dd:last-child::after {
  content: '';
}

.cart-line__remove {
  flex: none;
  align-self: flex-start;
  color: var(--color-ink-faint);
  transition: color var(--duration-quick) var(--ease-luxe);
}

.cart-line__remove:hover {
  color: var(--color-gold-light);
}

.cart-line__bottom {
  margin-top: auto;
  padding-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cart-line__qty {
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

.cart-line__price {
  font-size: var(--text-body);
}

.cart-drawer__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cart-drawer__note {
  margin-top: 0.5rem;
}

.cart-drawer__checkout {
  margin-top: 1.25rem;
}

.cart-drawer__view {
  margin-top: 0.75rem;
  display: flex;
  width: 100%;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Collection hero and category rail
   -------------------------------------------------------------------------- */
.collection-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 46vh;
  overflow: hidden;
  margin-top: calc(var(--header-h) * -1);
}

@media (min-width: 1024px) {
  .collection-hero {
    min-height: 56vh;
  }
}

.collection-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.collection-hero__media img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.collection-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-scrim);
}

.collection-hero__body {
  position: relative;
  z-index: 10;
  padding-top: var(--header-h);
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
}

.collection-hero__body h1 {
  margin-top: 1.25rem;
}

.collection-hero__blurb {
  margin-top: 1rem;
  max-width: 52ch;
  color: var(--color-bone-dim);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-bone-dim);
}

.crumbs a {
  transition: color var(--duration-quick) var(--ease-luxe);
}

.crumbs a:hover {
  color: var(--color-gold-light);
}

.category-rail {
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-onyx);
}

.category-rail__inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding-block: 1rem;
}

.cat-pill {
  flex: none;
  border: 1px solid var(--color-rule);
  padding: 0.625rem 1.25rem;
  font-size: var(--text-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-ink-muted);
  white-space: nowrap;
  transition: border-color var(--duration-quick) var(--ease-luxe),
    color var(--duration-quick) var(--ease-luxe);
}

.cat-pill:hover {
  border-color: var(--color-rule-strong);
  color: var(--color-ink);
}

.cat-pill.is-active {
  border-color: var(--color-gold);
  color: var(--color-gold-light);
}

/* --------------------------------------------------------------------------
   Collection toolbar
   -------------------------------------------------------------------------- */
.shop-toolbar {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  border-bottom: 1px solid var(--color-rule);
  background: rgba(11, 10, 9, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.shop-toolbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}

.shop-toolbar__filter {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-ink);
  transition: color var(--duration-quick) var(--ease-luxe);
}

.shop-toolbar__filter:hover {
  color: var(--color-gold-light);
}

/* Woo's own ordering form, restyled rather than reimplemented. */
.woocommerce-ordering select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-rule-strong);
  padding: 0.5rem 0;
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-ink-muted);
}

.woocommerce-ordering select:focus {
  outline: none;
  border-bottom-color: var(--color-gold);
}

/* The native dropdown list is drawn by the OS on the page ground, so the
   options need an explicit dark background or they render black on black. */
.woocommerce-ordering option {
  background: var(--color-onyx-raised);
  color: var(--color-ink);
}

/* A class rule with display beats the user agent's [hidden] rule, so the
   hidden state has to be restated here or the panel is never closed. */
.colour-filter[hidden] {
  display: none;
}

.colour-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-bottom: 1.25rem;
}

.colour-filter__item {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--color-ink-muted);
  transition: color var(--duration-quick) var(--ease-luxe);
}

.colour-filter__item:hover,
.colour-filter__item.is-on {
  color: var(--color-gold-light);
}

.colour-filter__clear {
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   Product page
   -------------------------------------------------------------------------- */
.product-detail__crumbs {
  padding-top: calc(var(--header-h) + clamp(1.5rem, 4vw, 3rem));
}

.product-detail__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(2rem, 4vw, 3.5rem) var(--spacing-section-tight);
}

/* Grid children default to min-width: auto, which lets the thumbnail strip
   push the whole column wider than the viewport instead of scrolling inside
   itself. This one line is the difference between a 912px column and a 350px
   one on a phone. */
.product-detail__grid > * {
  min-width: 0;
}

@media (min-width: 1024px) {
  .product-detail__grid {
    grid-template-columns: 1.15fr 1fr;
    align-items: start;
  }
}

.product-media {
  display: flex;
  flex-direction: column-reverse;
  gap: 1rem;
  min-width: 0;
}

@media (min-width: 768px) {
  .product-media {
    flex-direction: row;
  }
}

.product-media__strip {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  min-width: 0;
}

@media (min-width: 768px) {
  .product-media__strip {
    flex-direction: column;
    overflow-x: visible;
    overflow-y: auto;
    max-height: 80vh;
    flex: none;
    width: 82px;
  }
}

.product-media__thumb {
  flex: none;
  width: 72px;
  overflow: hidden;
  background: var(--color-onyx-raised);
  border: 1px solid transparent;
  transition: border-color var(--duration-quick) var(--ease-luxe);
}

@media (min-width: 768px) {
  .product-media__thumb {
    width: 100%;
  }
}

.product-media__thumb img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.product-media__thumb:hover {
  border-color: var(--color-rule-strong);
}

.product-media__thumb.is-active {
  border-color: var(--color-gold);
}

.product-media__main {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: var(--color-onyx-raised);
}

.product-media__main img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.product-media__badge {
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
  background: rgba(11, 10, 9, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 0.5rem 1rem;
  color: var(--color-gold-light);
}

@media (min-width: 1024px) {
  .product-buy {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

.product-buy__title {
  margin-top: 1rem;
}

.product-buy__price {
  margin-top: 1rem;
  font-size: 1.4rem;
  color: var(--color-ink);
}

/* Woo prints a del/ins pair for a sale price. Keep the old price quiet. */
.product-buy__price del,
.product-card__price del {
  color: var(--color-ink-faint);
  margin-right: 0.5rem;
}

.product-buy__price ins,
.product-card__price ins {
  text-decoration: none;
}

.product-buy__intro {
  margin-top: 1.5rem;
  max-width: 46ch;
}

.product-buy__rule {
  margin-block: 2rem;
}

.product-buy__inseam {
  margin-top: 1.5rem;
}

.product-buy__accordions {
  margin-top: 2.5rem;
  border-top: 1px solid var(--color-rule);
}

.reassurance {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.reassurance li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.reassurance svg {
  flex: none;
  color: var(--color-gold);
}

.tick-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tick-list li {
  display: flex;
  gap: 0.75rem;
}

.tick-list li::before {
  content: '';
  flex: none;
  margin-top: 0.7em;
  height: 4px;
  width: 4px;
  rotate: 45deg;
  background: var(--color-gold);
}

/* --------------------------------------------------------------------------
   The variation form

   Woo's markup, this theme's appearance. The selects stay in the DOM and stay
   the source of truth: they are hidden with .sr-only from theme.js, never
   display:none, because Woo's validation reads them.
   -------------------------------------------------------------------------- */
/* Woo prints the attributes as a table. Flatten it: the rows are stacked
   blocks here, and the spacing comes off .variation-row rather than the table
   cells, which carry no margins of their own. */
.variations,
.variations tbody,
.variations tr,
.variations td,
.variations th {
  display: block;
  padding: 0;
  border: 0;
  text-align: left;
}

.variation-row {
  margin-bottom: 2rem;
}

.variation-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.variation-options {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.variation-row--colour .variation-options {
  gap: 0.5rem;
}

.size-option {
  min-width: 3rem;
  border: 1px solid var(--color-rule-strong);
  padding: 0.75rem 1rem;
  font-size: var(--text-small);
  color: var(--color-ink);
  transition: border-color var(--duration-quick) var(--ease-luxe),
    color var(--duration-quick) var(--ease-luxe);
}

.size-option:hover {
  border-color: var(--color-ink-muted);
}

.size-option[aria-pressed='true'] {
  border-color: var(--color-gold);
  color: var(--color-gold-light);
}

/* Woo's own reset link under the selects */
.reset_variations {
  display: inline-block;
  margin-top: 1rem;
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-ink-muted);
}

.reset_variations:hover {
  color: var(--color-gold-light);
}

.woocommerce-variation-price {
  margin-bottom: 1rem;
  font-size: var(--text-lead);
  color: var(--color-ink);
}

.woocommerce-variation-availability p {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.woocommerce-variation-availability .out-of-stock {
  color: var(--color-gold-light);
}

/* Add to cart row: quantity, then the button. */
form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
}

form.cart .variations,
form.cart .woocommerce-variation,
form.cart .single_variation_wrap {
  width: 100%;
}

.quantity {
  display: flex;
  flex: none;
  align-items: center;
  border: 1px solid var(--color-rule-strong);
}

.quantity input[type='number'] {
  width: 3.5rem;
  background: transparent;
  border: 0;
  padding: 0.75rem 0.5rem;
  text-align: center;
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.quantity input[type='number']:focus {
  outline: none;
}

.quantity label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* Woo's add to cart button, wearing .btn--solid without the class. */
.single_add_to_cart_button,
.woocommerce .button.add_to_cart_button,
.wc-block-components-button {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 1rem 2.75rem;
  border: 1px solid #5c1a1e;
  background: var(--color-accent-solid);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  text-align: center;
  transition: background-color var(--duration-quick) var(--ease-luxe),
    border-color var(--duration-quick) var(--ease-luxe);
}

.single_add_to_cart_button:hover,
.woocommerce .button.add_to_cart_button:hover {
  background: var(--color-accent-solid-hover);
  border-color: #7a2328;
}

/*
 * Woo marks "pick your options first" with a .disabled class, not the
 * disabled attribute, so the button is still in the accessibility tree and
 * still owes a readable contrast ratio. Dimming it with opacity fails that.
 * A real muted surface with muted ink passes and reads more clearly as
 * unavailable than a faded accent does.
 */
.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled {
  background: var(--color-onyx-raised);
  border-color: var(--color-rule);
  color: var(--color-ink-muted);
  cursor: not-allowed;
}

/* The wishlist button beside add to cart, on the product page. */
.product-buy__wish {
  display: flex;
  min-height: 2.75rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-rule-strong);
  transition: border-color var(--duration-quick) var(--ease-luxe);
}

.product-buy__wish:hover {
  border-color: var(--color-gold);
}

.product-buy__wish[aria-pressed='true'] svg {
  fill: var(--color-gold);
  stroke: var(--color-gold);
}

/* --------------------------------------------------------------------------
   Related products
   -------------------------------------------------------------------------- */
/* These sit outside the .shell wrapper because Woo prints them from a hook,
   so they carry the shell measurements themselves. */
.related.products,
.up-sells.products {
  width: 100%;
  max-width: var(--spacing-shell);
  margin-inline: auto;
  padding-inline: var(--spacing-gutter);
  border-top: 1px solid var(--color-rule);
  padding-block: var(--spacing-section-tight);
}

.related.products > h2,
.up-sells.products > h2 {
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   Woo notices
   Woo prints these on the cart, checkout and account pages. Left rule in the
   accent for information, a warmer one for errors.
   -------------------------------------------------------------------------- */
.woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  border: 1px solid var(--color-rule);
  border-left: 2px solid var(--color-gold);
  background: var(--color-onyx-raised);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: var(--text-small);
  color: var(--color-ink);
}

.woocommerce-error {
  border-left-color: var(--color-gold-light);
}

.woocommerce-error li {
  width: 100%;
}

.woocommerce-message .button,
.woocommerce-info .button {
  margin-left: auto;
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-gold);
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
  color: var(--color-gold-light);
}

/* ==========================================================================
   Cart and checkout

   Woo's own stylesheets are gone, so every rule below is the only styling
   this markup gets. Woo's defaults assume a light page: the notices, the
   terms checkbox, the password meter and the shipping table are all invisible
   on #0b0a09 until they are given colours here. They are enumerated
   deliberately rather than fixed one at a time as they happen to appear.
   ========================================================================== */

.woocommerce-cart-form {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.shop_table {
  width: 100%;
  border-collapse: collapse;
}

.shop_table th {
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--color-rule);
  text-align: left;
  font-size: var(--text-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-ink-muted);
}

.shop_table td {
  padding: 1.5rem 1rem 1.5rem 0;
  border-bottom: 1px solid var(--color-rule);
  vertical-align: top;
}

.shop_table td:last-child,
.shop_table th:last-child {
  padding-right: 0;
  text-align: right;
}

.cart_item .product-thumbnail {
  width: 96px;
}

.cart_item .product-thumbnail img {
  width: 88px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--color-onyx-raised);
}

.cart_item .product-name a {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-ink);
  transition: color var(--duration-quick) var(--ease-luxe);
}

.cart_item .product-name a:hover {
  color: var(--color-gold-light);
}

/* Woo prints variation data as a definition list. Flatten it to one quiet
   line, the same treatment as in the drawer. */
.cart_item .variation {
  margin-top: 0.5rem;
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-ink-muted);
}

.cart_item .variation dt,
.cart_item .variation dd,
.cart_item .variation dd p {
  display: inline;
  margin: 0;
}

.cart_item .variation dd::after {
  content: ' / ';
  color: var(--color-ink-faint);
}

.cart_item .variation dd:last-child::after {
  content: '';
}

.product-remove .remove {
  display: inline-flex;
  height: 1.75rem;
  width: 1.75rem;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-ink-faint);
  transition: color var(--duration-quick) var(--ease-luxe);
}

.product-remove .remove:hover {
  color: var(--color-gold-light);
}

.quantity__step {
  display: flex;
  flex: none;
  height: 2.5rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-muted);
  transition: color var(--duration-quick) var(--ease-luxe);
}

.quantity__step:hover {
  color: var(--color-gold-light);
}

/* Chrome and Safari draw their own spinner on top of the custom buttons. */
.quantity input[type='number']::-webkit-outer-spin-button,
.quantity input[type='number']::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.quantity input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Cart actions row: coupon left, update right. */
.shop_table td.actions {
  padding-top: 1.75rem;
  border-bottom: 0;
}

.shop_table td.actions .coupon {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-right: 1rem;
}

.shop_table td.actions input#coupon_code {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-rule-strong);
  padding: 0.625rem 0;
  min-width: 12rem;
  color: var(--color-ink);
}

.shop_table td.actions input#coupon_code:focus {
  outline: none;
  border-bottom-color: var(--color-gold);
}

/* Woo 9 and later print the coupon rejection inline next to the field rather
   than as a page notice, with its own class. Without a rule it inherits body
   copy and reads as a stray sentence. */
.coupon-error-notice {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-gold-light);
}

.shop_table td.actions input#coupon_code.has-error {
  border-bottom-color: var(--color-gold-light);
}

.shop_table td.actions button {
  border: 1px solid var(--color-rule-strong);
  padding: 0.75rem 1.5rem;
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-ink);
  transition: border-color var(--duration-quick) var(--ease-luxe),
    color var(--duration-quick) var(--ease-luxe);
}

.shop_table td.actions button:hover:not(:disabled) {
  border-color: var(--color-gold);
  color: var(--color-gold-light);
}

.shop_table td.actions button:disabled {
  color: var(--color-ink-faint);
  border-color: var(--color-rule);
  cursor: not-allowed;
}

/* Cart totals panel */
.cart-collaterals {
  display: grid;
  gap: 2rem;
}

@media (min-width: 900px) {
  .cart-collaterals {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    justify-content: end;
  }

  .cart-collaterals .cross-sells {
    grid-column: 1 / -1;
  }
}

.cart_totals {
  grid-column: 2;
  border: 1px solid var(--color-rule);
  background: var(--color-onyx-raised);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

@media (max-width: 899px) {
  .cart_totals {
    grid-column: 1;
  }
}

.cart_totals h2 {
  margin-bottom: 1.5rem;
  font-size: var(--text-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-ink-muted);
}

.cart_totals table th,
.cart_totals table td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--color-rule);
  font-size: var(--text-small);
  text-align: left;
  vertical-align: top;
}

.cart_totals table td,
.woocommerce-checkout-review-order-table td {
  text-align: right;
}

.cart_totals table th,
.woocommerce-checkout-review-order-table th {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-ink-muted);
}

.cart_totals .order-total th,
.cart_totals .order-total td,
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
  border-bottom: 0;
  padding-top: 1.25rem;
  font-size: var(--text-lead);
  color: var(--color-ink);
}

.cart_totals .includes_tax,
.woocommerce-checkout-review-order-table .includes_tax {
  display: block;
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-ink-faint);
}

/* The shipping method list inside the totals. Woo prints bare radios. */
#shipping_method {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  text-align: right;
}

#shipping_method li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

#shipping_method label {
  font-size: var(--text-small);
  color: var(--color-ink);
}

.woocommerce-shipping-destination {
  margin-top: 0.75rem;
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-ink-faint);
}

.woocommerce-shipping-calculator {
  margin-top: 1rem;
}

.shipping-calculator-button {
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-gold);
}

.wc-proceed-to-checkout {
  margin-top: 1.75rem;
}

.wc-proceed-to-checkout .checkout-button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 1rem 2.75rem;
  border: 1px solid #5c1a1e;
  background: var(--color-accent-solid);
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  transition: background-color var(--duration-quick) var(--ease-luxe),
    border-color var(--duration-quick) var(--ease-luxe);
}

.wc-proceed-to-checkout .checkout-button:hover {
  background: var(--color-accent-solid-hover);
  border-color: #7a2328;
}

/* --------------------------------------------------------------------------
   Checkout

   One page, styled as progressive sections. Deliberately not a wizard that
   hides fields: Woo validates the whole form on submit, and a hidden invalid
   field produces an error pointing at something the customer cannot see.
   -------------------------------------------------------------------------- */
.woocommerce-checkout .checkout {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

@media (min-width: 1024px) {
  .woocommerce-checkout .checkout {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
}

#customer_details {
  display: grid;
  gap: 2.5rem;
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-rule);
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: 400;
  color: var(--color-ink);
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-row-wide,
  .form-row-full {
    grid-column: 1 / -1;
  }
}

/* Woo's own field markup, wearing the .field treatment from components.css */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-row label {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-ink-muted);
}

.form-row .required {
  color: var(--color-gold);
  text-decoration: none;
}

.form-row .input-text,
.form-row select,
.form-row textarea,
.select2-container .select2-selection {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-rule-strong);
  border-radius: 0;
  padding: 0.75rem 0;
  color: var(--color-ink);
  transition: border-color var(--duration-quick) var(--ease-luxe);
}

.form-row .input-text:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-bottom-color: var(--color-gold);
}

.form-row .input-text::placeholder,
.form-row textarea::placeholder {
  color: var(--color-ink-faint);
}

.form-row select option {
  background: var(--color-onyx-raised);
  color: var(--color-ink);
}

/* Woo marks a failed field with .woocommerce-invalid. Without a colour it is
   indistinguishable from a valid one on this ground. */
.form-row.woocommerce-invalid .input-text,
.form-row.woocommerce-invalid select {
  border-bottom-color: var(--color-gold-light);
}

.form-row.woocommerce-validated .input-text {
  border-bottom-color: var(--color-rule-strong);
}

/* Checkboxes: the terms box and "ship to a different address". */
.woocommerce-form__label-for-checkbox,
.form-row.woocommerce-validate-required label.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.woocommerce-form__input-checkbox,
input[type='checkbox'] {
  flex: none;
  margin-top: 0.2em;
  height: 1rem;
  width: 1rem;
  accent-color: var(--color-gold);
}

#ship-to-different-address label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Order review panel */
.woocommerce-checkout-review-order {
  border: 1px solid var(--color-rule);
  background: var(--color-onyx-raised);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

@media (min-width: 1024px) {
  .woocommerce-checkout-review-order {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

.woocommerce-checkout-review-order-table .product-name {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-small);
  color: var(--color-ink);
}

.woocommerce-checkout-review-order-table .product-quantity {
  color: var(--color-ink-faint);
}

/* Payment box */
#payment {
  margin-top: 1.75rem;
}

#payment ul.payment_methods {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: 1px solid var(--color-rule);
  padding-top: 1.5rem;
  margin-bottom: 1.5rem;
}

#payment ul.payment_methods li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

#payment ul.payment_methods label {
  font-size: var(--text-small);
  color: var(--color-ink);
}

#payment .payment_box {
  width: 100%;
  border-left: 2px solid var(--color-gold);
  background: var(--color-onyx-sunken);
  padding: 1rem 1.25rem;
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

#payment .payment_box p:last-child {
  margin-bottom: 0;
}

.woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 1.5rem;
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.woocommerce-privacy-policy-text {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

#place_order {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 1rem 2.75rem;
  border: 1px solid #5c1a1e;
  background: var(--color-accent-solid);
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  transition: background-color var(--duration-quick) var(--ease-luxe),
    border-color var(--duration-quick) var(--ease-luxe);
}

#place_order:hover {
  background: var(--color-accent-solid-hover);
  border-color: #7a2328;
}

/* The login and coupon toggles Woo prints above the checkout form. */
.woocommerce-form-login,
.checkout_coupon {
  border: 1px solid var(--color-rule);
  background: var(--color-onyx-raised);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: 1.5rem;
  display: grid;
  gap: 1.25rem;
}

.woocommerce-form-login .form-row,
.checkout_coupon .form-row {
  margin: 0;
}

.woocommerce-form-login button,
.checkout_coupon button {
  justify-self: start;
  border: 1px solid var(--color-rule-strong);
  padding: 0.75rem 1.75rem;
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-ink);
  transition: border-color var(--duration-quick) var(--ease-luxe),
    color var(--duration-quick) var(--ease-luxe);
}

.woocommerce-form-login button:hover,
.checkout_coupon button:hover {
  border-color: var(--color-gold);
  color: var(--color-gold-light);
}

/* The blocking overlay Woo drops over the review panel while it recalculates.
   Its default is a white sheet, which flashes on a dark page. */
.blockUI.blockOverlay {
  background: var(--color-onyx-sunken) !important;
  opacity: 0.6 !important;
}

/* Password strength meter on the account and checkout forms. */
.woocommerce-password-strength {
  padding: 0.5rem 0;
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
}

.woocommerce-password-strength.short,
.woocommerce-password-strength.bad {
  color: var(--color-gold-light);
}

.woocommerce-password-strength.good,
.woocommerce-password-strength.strong {
  color: var(--color-bone-dim);
}

.woocommerce-password-hint {
  display: block;
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

/* --------------------------------------------------------------------------
   Order received and My Account
   -------------------------------------------------------------------------- */
.woocommerce-order-overview {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-block: 1px solid var(--color-rule);
  padding-block: 1.75rem;
  margin-block: 2rem;
}

.woocommerce-order-overview li {
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-ink-muted);
}

.woocommerce-order-overview li strong {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-ink);
}

.woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: 1.25rem;
  margin-bottom: 2.5rem;
}

.woocommerce-MyAccount-navigation a {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-ink-muted);
  transition: color var(--duration-quick) var(--ease-luxe);
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation .is-active a {
  color: var(--color-gold);
}

/* Screen reader only, Woo's own class name for it. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}