/* Cart & Checkout Blocks — dark theme overrides. */

.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-address-form select,
.wc-block-checkout__form select {
  background: var(--sh-bg) !important;
  color: var(--sh-text) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: var(--sh-radius-card) !important;
}

.wc-block-components-text-input label {
  color: var(--sh-text-muted) !important;
}

.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus ~ label {
  color: var(--sh-text) !important;
}

.wc-block-components-text-input input:focus {
  border-color: var(--sh-accent) !important;
  box-shadow: none !important;
}

/* Prevent browser autofill from forcing a white background. */
.wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-text-input input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--sh-text);
  -webkit-box-shadow: 0 0 0 1000px var(--sh-bg) inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* Loading skeletons — dark surface instead of default gray shimmer. */
.wc-block-components-skeleton__element {
  background-color: var(--sh-surface) !important;
}

.wc-block-components-skeleton__element:after {
  background-image: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--sh-white) 6%, transparent),
    transparent
  ) !important;
}

/* Blocks buttons (Proceed to Checkout, Place Order, empty-cart CTA):
   match the theme's uppercase rounded button language. */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--sh-radius-button) !important;
}

/* Contained/primary submits only — gold fill + onyx type, same as shop ATC.
   Outline/text/link variants must not become gold bricks. Inner span inherits
   so Woo's child color cannot keep laser-blue type on gold. */
:is(
  .wc-block-components-button,
  .wc-block-cart__submit-button,
  .wc-block-components-checkout-place-order-button
):not(.outlined):not(.is-style-outline):not(.is-link):not(.ghost):not(.link-style):not(.text) {
  background: var(--sh-accent) !important;
  color: var(--sh-accent-text) !important;
}

:is(
  .wc-block-components-button,
  .wc-block-cart__submit-button,
  .wc-block-components-checkout-place-order-button
):not(.outlined):not(.is-style-outline):not(.is-link):not(.ghost):not(.link-style):not(.text) :is(.wc-block-components-button__text, span) {
  color: inherit !important;
}

:is(
  .wc-block-components-button,
  .wc-block-cart__submit-button,
  .wc-block-components-checkout-place-order-button
):not(.outlined):not(.is-style-outline):not(.is-link):not(.ghost):not(.link-style):not(.text):is(:hover, :focus, :focus-visible) {
  background: var(--sh-text) !important;
  color: var(--sh-bg) !important;
}

/* Empty-cart "New in store" grid: same card chrome as the shop loop. */
.wc-block-grid__products .wc-block-grid__product {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-card);
  padding: var(--sh-space-2);
  overflow: hidden;
}

.wc-block-grid__product-title,
.wc-block-grid__product-title a {
  color: var(--sh-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.wc-block-grid__product-price {
  color: var(--sh-text-muted) !important;
}

.wc-block-grid__products .add_to_cart_button {
  background: var(--sh-accent) !important;
  color: var(--sh-accent-text) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--sh-radius-button);
}

.wc-block-grid__products .add_to_cart_button:hover,
.wc-block-grid__products .add_to_cart_button:focus {
  background: var(--sh-text) !important;
  color: var(--sh-bg) !important;
}

/* Section headings inside cart/checkout blocks ("New in store",
   "Your cart is currently empty!"). */
.wp-block-woocommerce-empty-cart-block h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Totals sidebar: label/value hierarchy. */
.wc-block-components-totals-item__label {
  color: var(--sh-text-muted);
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
  font-family: var(--font-body);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--sh-text);
  font-family: var(--font-display);
  font-weight: 700;
}

/* Empty-cart dots separator reads as three stray specks on dark — render
   it as the system's hairline divider instead. */
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
  border: 0;
  border-top: 1px solid var(--sh-border);
  width: 120px;
  margin: var(--sh-space-4) auto;
}

.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots::before {
  content: none;
}

/* Checkout step + summary headings: brand type instead of default sans. */
.wc-block-components-checkout-step__title,
.wc-block-components-title.wc-block-components-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Selection controls: gold accents for radio/checkbox states. */
.wc-block-components-radio-control__input,
.wc-block-components-checkbox__input {
  accent-color: var(--sh-accent);
}

.wc-block-components-checkbox__input:checked {
  background: var(--sh-accent) !important;
  border-color: var(--sh-accent) !important;
}

.wc-block-components-checkbox__input:checked + svg.wc-block-components-checkbox__mark {
  fill: var(--sh-accent-text);
}

.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control-accent .wc-block-components-radio-control__option-checked {
  border-color: var(--sh-accent) !important;
}

.wc-block-components-radio-control__input:checked {
  border-color: var(--sh-accent) !important;
}

.wc-block-components-radio-control__input:checked::before {
  background: var(--sh-accent) !important;
}

/* Woo Blocks ships compact mouse-sized cart controls. Keep the glyphs at
   their native size while making the real interactive boxes touch-safe. */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button {
  flex: 0 0 var(--tap) !important;
  min-width: var(--tap) !important;
  min-height: var(--tap) !important;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
  width: calc(var(--tap) + var(--tap) + var(--tap) + 2px) !important;
  max-width: 100%;
  min-height: var(--tap);
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector__input {
  min-width: var(--tap) !important;
  min-height: var(--tap);
}

.wp-block-woocommerce-cart .wc-block-cart-item__remove-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: var(--tap) !important;
  min-height: var(--tap) !important;
  padding: 0.625rem !important;
}

.wp-block-woocommerce-cart .wc-block-components-panel__button {
  min-height: var(--tap) !important;
  padding-block: 0.625rem !important;
}

/* Order-summary thumbnail quantity badge ships white-on-white on dark. */
.wc-block-components-order-summary-item__quantity {
  background: var(--sh-accent) !important;
  border: 0 !important;
  color: var(--sh-accent-text) !important;
  box-shadow: none !important;
}

/* Order-received ("thank you") endpoint (design-loop: thank-you). */

/* The confirmation line is the page's key message — display treatment. */
.woocommerce-order .woocommerce-thankyou-order-received {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--sh-text-2xl);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: var(--sh-space-4);
}

/* Order meta strip: surface card with hairline dividers (was dotted).
   fit-content keeps the card hugging its items instead of dragging an
   empty surface across the full content width. */
ul.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-card);
  padding: var(--sh-space-3);
  margin-bottom: var(--sh-space-6);
}

ul.woocommerce-order-overview li {
  border-right: 1px solid var(--sh-border);
  border-right-style: solid !important;
  font-size: var(--sh-text-sm);
  color: var(--sh-text-muted);
}

ul.woocommerce-order-overview li:last-child {
  border-right: 0 !important;
}

ul.woocommerce-order-overview li strong {
  color: var(--sh-text);
  font-size: var(--sh-text-base);
}

/* Section titles follow the site's display treatment. */
.woocommerce-order-details__title,
.woocommerce-column__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* Address card: dark surface + hairline instead of the stark outline. */
.woocommerce-customer-details address {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-card);
  padding: var(--sh-space-3);
  max-width: 48ch;
}

@media (max-width: 719px) {
  /* Stack the meta strip as rows instead of a cramped wrap. */
  ul.woocommerce-order-overview {
    width: 100%;
  }

  ul.woocommerce-order-overview li {
    display: block;
    float: none;
    width: 100%;
    margin-right: 0;
    padding: var(--sh-space-1) 0;
    border-right: 0 !important;
    border-bottom: 1px solid var(--sh-border);
  }

  ul.woocommerce-order-overview li:last-child {
    border-bottom: 0;
  }
}

/* Let cart composition respond to available width measured in its current
   root-relative text size. This catches text-only zoom without forcing the
   single-column cart on an ordinary wide desktop. */
body.woocommerce-cart article.single-entry {
  container-name: sh-cart-page;
  container-type: inline-size;
  font-size: 1rem;
}

@container sh-cart-page (max-width: 48em) {
  .entry-content-wrap {
    padding-inline: 0 !important;
  }

  .entry-content.single-content,
  .wp-block-woocommerce-cart,
  .wc-block-cart,
  .wc-block-cart__main,
  .wc-block-cart__sidebar,
  .sh-shipbar {
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
  }

  .wc-block-cart {
    flex-direction: column;
  }

  .wc-block-cart__main,
  .wc-block-cart__sidebar {
    padding-inline: 0 !important;
  }

  table.wc-block-cart-items {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  table.wc-block-cart-items .wc-block-cart-items__row {
    box-sizing: border-box;
    width: 100%;
    grid-template-columns: minmax(64px, 80px) minmax(0, 1fr) !important;
    column-gap: 12px;
  }

  table.wc-block-cart-items .wc-block-cart-item__image {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding-right: 0 !important;
  }

  table.wc-block-cart-items .wc-block-cart-item__product {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0;
  }

  table.wc-block-cart-items .wc-block-cart-item__total {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-content: flex-start;
    min-width: 0;
    text-align: left;
  }

  table.wc-block-cart-items .wc-block-cart-item__wrap,
  table.wc-block-cart-items .wc-block-components-product-name {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .entry-content .sh-shipbar {
    padding: 12px 16px !important;
  }

  .wc-block-cart__submit-button {
    min-height: var(--tap);
    padding: 12px 20px !important;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@container sh-cart-page (max-width: 20em) {
  table.wc-block-cart-items .wc-block-cart-items__row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  table.wc-block-cart-items .wc-block-cart-item__image {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 80px;
  }

  table.wc-block-cart-items .wc-block-cart-item__product {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100%;
  }

  table.wc-block-cart-items .wc-block-cart-item__total {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  table.wc-block-cart-items .wc-block-cart-item__quantity {
    flex-wrap: wrap;
    padding-right: 0 !important;
  }

}

/* E-125: keep Woo's single checkout action visible whenever its normal
   position is below the viewport, including narrow and desktop carts.
   Woo removes this class when the action returns to the document flow. */
body.woocommerce-cart .wc-block-cart .wc-block-cart__submit-container--sticky {
  display: flex;
  justify-content: center;
  position: fixed;
  inset: auto 0 0;
  box-sizing: border-box;
  width: 100%;
  padding: var(--sh-space-2);
  padding-bottom: max(var(--sh-space-2), env(safe-area-inset-bottom));
  background: var(--sh-bg) !important;
  border-top: 1px solid var(--sh-border);
  z-index: 30;
}
body.woocommerce-cart .wc-block-cart__submit-container--sticky::before {
  content: none;
}
body.woocommerce-cart .wc-block-cart__submit-container--sticky .wc-block-cart__submit-button {
  max-width: 30rem;
  min-height: var(--tap);
  white-space: normal;
}

/* Free-shipping progress above the blocks cart (design-loop:
   cart-shipping-progress). Gold fill on a border-tone track. */
.sh-shipbar {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-card);
  padding: var(--sh-space-2) var(--sh-space-3);
  margin-bottom: var(--sh-space-3);
}

.sh-shipbar-msg {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--sh-text-sm);
  line-height: var(--sh-leading-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sh-space-1);
}

.sh-shipbar.is-done .sh-shipbar-msg {
  color: var(--sh-text);
}

.sh-shipbar-track {
  display: block;
  height: 4px;
  background: var(--sh-border);
}

.sh-shipbar-fill {
  display: block;
  height: 100%;
  background: var(--sh-accent);
  transition: width 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .sh-shipbar-fill {
    transition: none;
  }
}

/* Figma Make order confirmation — keep WooCommerce's data and payment states. */
body.woocommerce-order-received:has(.woocommerce-order) .entry-hero {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* E-126: the confirmation page is a light card on the dark shell. Values below are
   documented light-scope tokens; success/error states are not in DESIGN.md yet. */
body.woocommerce-order-received {
  --sh-ok-surface: #ebfff5;
  --sh-ok-accent: #2bc665;
  --sh-fail-surface: #ffdede;
  --sh-card-ink: #1d1d1f;
  --sh-card-ink-strong: #202124;
  --sh-card-ink-muted: #25282a;
  --sh-card-surface: #f5f6f7;
  --sh-card-rule: #d0d7de;
  --sh-card-hairline: #e5e7eb;
  --sh-card-head: #f9fafb;
}
body.woocommerce-order-received .woocommerce-order {
  max-width: 832px;
  margin: 0 auto;
  padding: 16px 0 32px;
  overflow-wrap: anywhere;
}
body.woocommerce-order-received .woocommerce-order .payment-confirmation-container {
  position: relative;
  border-radius: 12px;
  padding: 20px 24px;
  margin: 0 0 40px;
  text-align: left;
  min-height: 102px;
}
body.woocommerce-order-received .payment-confirmation-container.success {
  background: var(--sh-ok-surface);
}
body.woocommerce-order-received .payment-confirmation-container.error {
  background: var(--sh-fail-surface);
}
body.woocommerce-order-received .payment-confirmation-container::before,
body.woocommerce-order-received .payment-confirmation-container .underline {
  display: none;
}
body.woocommerce-order-received .payment-confirmation-container .icon-wrapper {
  float: left;
  width: 62px;
  height: 62px;
  margin: 0 16px 0 0;
}
body.woocommerce-order-received .payment-confirmation-container .icon-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body.woocommerce-order-received .payment-confirmation-container .message {
  min-height: 62px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
body.woocommerce-order-received .payment-confirmation-container .message p {
  color: var(--sh-card-ink);
  font-size: 1.125rem;
  line-height: 1.45;
  margin: 0;
}
body.woocommerce-order-received .payment-confirmation-container .message .subtitle {
  font-weight: 700;
}
body.woocommerce-order-received .woocommerce-order .woocommerce-thankyou-order-received {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: .025em;
  margin: 0 0 24px;
}
body.woocommerce-order-received .woocommerce-order .woocommerce-thankyou-order-received::before {
  content: '';
  display: block;
  width: 48px;
  height: 8px;
  border-radius: 999px;
  background: var(--sh-ok-accent);
  margin-bottom: 20px;
}
body.woocommerce-order-received ul.woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  padding: 0;
  margin: 0 0 40px;
  background: var(--sh-card-surface);
  border: 0;
  border-radius: 12px;
  overflow: hidden;
}
body.woocommerce-order-received ul.woocommerce-order-overview::before,
body.woocommerce-order-received ul.woocommerce-order-overview::after {
  content: none;
}
body.woocommerce-order-received ul.woocommerce-order-overview li {
  float: none;
  width: auto;
  min-width: 0;
  padding: 14px 16px;
  margin: 0;
  border: 0 !important;
  border-left: 1px solid var(--sh-card-rule) !important;
  color: var(--sh-card-ink-muted);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: .025em;
}
body.woocommerce-order-received ul.woocommerce-order-overview li:first-child {
  border-left: 0 !important;
}
body.woocommerce-order-received ul.woocommerce-order-overview li strong {
  display: block;
  margin-top: 4px;
  color: var(--sh-card-ink-strong);
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
}
body.woocommerce-order-received ul.woocommerce-order-overview:has(.email) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-column__title {
  font-size: 1.625rem;
  line-height: 1.25;
  letter-spacing: .025em;
  margin: 0 0 16px;
}
body.woocommerce-order-received .woocommerce-order table.shop_table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 0 40px;
  font-size: 1rem;
}
body.woocommerce-order-received .woocommerce-order table.shop_table :is(th, td) {
  width: 50%;
  padding: 14px 12px;
  border: 0;
  border-bottom: 1px solid var(--sh-card-hairline);
  vertical-align: top;
  text-align: left;
  line-height: 1.5;
}
body.woocommerce-order-received .woocommerce-order table.shop_table thead {
  background: var(--sh-card-head);
  border-top: 1px solid var(--sh-card-hairline);
}
body.woocommerce-order-received .woocommerce-order table.shop_table .button {
  display: inline-block;
  margin: 4px 8px 4px 0;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 0.875rem;
}
body.woocommerce-order-received .woocommerce-customer-details address {
  max-width: none;
  padding: 20px;
  line-height: 1.7;
}
@media (max-width: 639px) {
  body.woocommerce-order-received .woocommerce-order { padding-top: 0; }
  body.woocommerce-order-received .woocommerce-order .payment-confirmation-container {
    padding: 16px;
    min-height: 84px;
    margin-bottom: 32px;
  }
  body.woocommerce-order-received .payment-confirmation-container .icon-wrapper {
    width: 52px;
    height: 52px;
  }
  body.woocommerce-order-received .payment-confirmation-container .message { min-height: 52px; }
  body.woocommerce-order-received .payment-confirmation-container .message p { font-size: 1rem; }
  body.woocommerce-order-received .woocommerce-order .woocommerce-thankyou-order-received { font-size: 1.375rem; }
  body.woocommerce-order-received ul.woocommerce-order-overview,
  body.woocommerce-order-received ul.woocommerce-order-overview:has(.email) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 32px;
  }
  body.woocommerce-order-received ul.woocommerce-order-overview li:nth-child(odd) { border-left: 0 !important; }
  body.woocommerce-order-received ul.woocommerce-order-overview li:nth-child(n+3) { border-top: 1px solid var(--sh-card-rule) !important; }
  body.woocommerce-order-received ul.woocommerce-order-overview li strong { font-size: 0.875rem; }
  body.woocommerce-order-received .woocommerce-order-details__title,
  body.woocommerce-order-received .woocommerce-column__title { font-size: 1.25rem; }
  body.woocommerce-order-received .woocommerce-order table.shop_table { font-size: 0.875rem; }
  body.woocommerce-order-received .woocommerce-order table.shop_table :is(th, td) { padding: 12px 8px; }
}
@media (max-width: 639px) {
  body.woocommerce-order-received .woocommerce-order table.shop_table tfoot :is(th, td) {
    display: block;
    width: 100%;
  }
  body.woocommerce-order-received .woocommerce-order table.shop_table tfoot th {
    border-bottom: 0;
    padding-bottom: 2px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .025em;
  }
  body.woocommerce-order-received .woocommerce-order table.shop_table tfoot td { padding-top: 2px; }
}

/* E106: native Woo fallback uses the existing content colour scope. */
.sh-commerce-classic .woocommerce table.shop_table,
.sh-commerce-classic .woocommerce table.shop_table :is(thead, tbody, tfoot, tr, th, td) {
  background: var(--sh-bg);
  color: var(--sh-text);
  border-color: var(--sh-border);
  overflow-wrap: anywhere;
}
.sh-commerce-classic .woocommerce table.shop_table a { color: var(--sh-text); }
.sh-commerce-classic .woocommerce ul#shipping_method li label {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}

/* Keep the tax amount separate from translated text on both sides.
   Woo Blocks renders these as adjacent flex items. */
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item-tax {
  column-gap: 0.25em;
}