/*
 * WooCommerce – Theme Sync Styles
 * Targets WooCommerce Block-based cart and checkout (React components).
 * Only font-family, colors, and border/background treatments are applied.
 * Font sizes, weights, and layout are intentionally left untouched.
 */

/* ─── CSS Variables (mirrors main.css) ─────────────────────────────────── */
:root {
  --shc-primary: #2f2560;
  --shc-accent: #f03400;
  --shc-accent-dark: #d82e00;
  --shc-text: #1a1a1a;
  --shc-white: #ffffff;
  --shc-gray-light: #f4f6f8;
  --shc-font-main: "Inter", system-ui, -apple-system, sans-serif;
  --shc-font-head: "Outfit", sans-serif;
}

/* ─── Text inputs ────────────────────────────────────────────────────────── */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea {
  background-color: var(--shc-gray-light) !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  color: var(--shc-text) !important;
  font-family: var(--shc-font-main) !important;
  box-shadow: none !important;
  transition:
    border-color 0.3s,
    background-color 0.3s,
    box-shadow 0.3s !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus {
  background-color: var(--shc-white) !important;
  border-color: #ddd !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  outline: none !important;
}

/* ─── Labels ─────────────────────────────────────────────────────────────── */
.wc-block-components-text-input label,
.wc-block-components-select__label,
.wc-blocks-components-select__label,
.wc-block-components-combobox label,
.wc-block-components-checkbox__label,
.wc-block-checkout__form label {
  font-family: var(--shc-font-main) !important;
}

/* ─── Select: correct class is wc-blocks-components-select (blocks plural) ─ */
.wc-blocks-components-select__container {
  background-color: var(--shc-gray-light) !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  transition:
    border-color 0.3s,
    background-color 0.3s,
    box-shadow 0.3s !important;
}

.wc-blocks-components-select__container:focus-within {
  background-color: var(--shc-white) !important;
  border-color: #ddd !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.wc-blocks-components-select__select {
  font-family: var(--shc-font-main) !important;
  background-color: transparent !important;
  color: var(--shc-text) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.wc-blocks-components-select__label {
  font-family: var(--shc-font-main) !important;
  background-color: transparent !important;
}

/* ─── Coupon / token field ───────────────────────────────────────────────── */
.wc-block-components-form-token-field__input,
.wc-block-components-form-token-field input {
  background-color: var(--shc-gray-light) !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  font-family: var(--shc-font-main) !important;
  color: var(--shc-text) !important;
  box-shadow: none !important;
}

.wc-block-components-form-token-field__input:focus,
.wc-block-components-form-token-field input:focus {
  background-color: var(--shc-white) !important;
  border-color: #ddd !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  outline: none !important;
}

/* ─── Note / order textarea ──────────────────────────────────────────────── */
.wc-block-checkout__add-note textarea,
.wc-block-components-textarea,
.wc-block-components-textarea textarea {
  background-color: var(--shc-gray-light) !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  font-family: var(--shc-font-main) !important;
  color: var(--shc-text) !important;
  box-shadow: none !important;
  transition:
    border-color 0.3s,
    background-color 0.3s,
    box-shadow 0.3s !important;
}

.wc-block-checkout__add-note textarea:focus,
.wc-block-components-textarea:focus,
.wc-block-components-textarea textarea:focus {
  background-color: var(--shc-white) !important;
  border-color: #ddd !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  outline: none !important;
}

/* ─── Checkbox: matches .cfg-shortcut-box style, orange accent ───────────── */
.wc-block-components-checkbox__input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border: 2px solid var(--shc-accent) !important;
  border-radius: 4px !important;
  background-color: var(--shc-white) !important;
  cursor: pointer !important;
  transition:
    border-color 0.15s,
    background-color 0.15s !important;
  flex-shrink: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.wc-block-components-checkbox__input[type="checkbox"]:focus,
.wc-block-components-checkbox__input[type="checkbox"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Checked: orange fill */
.wc-block-components-checkbox__input[type="checkbox"]:checked {
  background-color: var(--shc-accent) !important;
  border-color: var(--shc-accent) !important;
}

/*
 * Checkmark SVG: WooCommerce blocks uses fill:currentColor on the mark.
 * Set color transparent by default, white when checked.
 */
.wc-block-components-checkbox__mark {
  pointer-events: none !important;
  color: transparent !important;
  transition: color 0.15s !important;
}

.wc-block-components-checkbox__mark path,
.wc-block-components-checkbox__mark polyline,
.wc-block-components-checkbox__mark * {
  fill: transparent !important;
  stroke: transparent !important;
  transition:
    fill 0.15s,
    stroke 0.15s !important;
}

.wc-block-components-checkbox__input[type="checkbox"]:checked
  ~ .wc-block-components-checkbox__mark {
  color: var(--shc-white) !important;
}

.wc-block-components-checkbox__input[type="checkbox"]:checked
  ~ .wc-block-components-checkbox__mark
  path,
.wc-block-components-checkbox__input[type="checkbox"]:checked
  ~ .wc-block-components-checkbox__mark
  polyline,
.wc-block-components-checkbox__input[type="checkbox"]:checked
  ~ .wc-block-components-checkbox__mark
  * {
  fill: var(--shc-white) !important;
  stroke: var(--shc-white) !important;
}

/* ─── Remove focus ring from Proceed to Checkout button ──────────────────── */
.wc-block-cart__submit-button:focus,
.wc-block-cart__submit-button:focus-visible,
.wc-block-components-checkout-place-order-button:focus,
.wc-block-components-checkout-place-order-button:focus-visible,
.wc-block-components-button:focus,
.wc-block-components-button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ─── Hide auto-generated product description in cart & checkout ─────────── */
.wc-block-components-product-summary {
  display: none !important;
}

/* ─── All block buttons: heading font ───────────────────────────────────── */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.wp-block-woocommerce-proceed-to-checkout-block button {
  font-family: var(--shc-font-head) !important;
  border-radius: 4px !important;
  letter-spacing: 0.5px !important;
  transition:
    background-color 0.3s,
    border-color 0.3s,
    color 0.3s !important;
}

/* ─── Proceed to Checkout button ─────────────────────────────────────────── */
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button {
  background-color: var(--shc-accent) !important;
  color: var(--shc-white) !important;
  border: 2px solid var(--shc-accent) !important;
  font-family: var(--shc-font-head) !important;
}

.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block
  .wc-block-cart__submit-button:hover {
  background-color: var(--shc-accent-dark) !important;
  border-color: var(--shc-accent-dark) !important;
  color: var(--shc-white) !important;
}

/* ─── Place Order button ─────────────────────────────────────────────────── */
.wc-block-components-checkout-place-order-button {
  background-color: var(--shc-accent) !important;
  color: var(--shc-white) !important;
  border: 2px solid var(--shc-accent) !important;
  font-family: var(--shc-font-head) !important;
}

.wc-block-components-checkout-place-order-button:hover {
  background-color: var(--shc-accent-dark) !important;
  border-color: var(--shc-accent-dark) !important;
  color: var(--shc-white) !important;
}

/* ─── Coupon "Apply" button ──────────────────────────────────────────────── */
.wc-block-components-totals-coupon__button,
.wc-block-components-totals-coupon .wc-block-components-button {
  background-color: var(--shc-accent) !important;
  color: var(--shc-white) !important;
  border: 2px solid var(--shc-accent) !important;
  font-family: var(--shc-font-head) !important;
}

.wc-block-components-totals-coupon__button:hover,
.wc-block-components-totals-coupon .wc-block-components-button:hover {
  background-color: var(--shc-accent-dark) !important;
  border-color: var(--shc-accent-dark) !important;
  color: var(--shc-white) !important;
}

/* ─── Secondary links ────────────────────────────────────────────────────── */
.wc-block-components-totals-coupon__remove-button,
.wc-block-cart-item__remove-link {
  font-family: var(--shc-font-main) !important;
  color: var(--shc-primary) !important;
}

/* ─── Checkout section headings ──────────────────────────────────────────── */
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__heading {
  font-family: var(--shc-font-head) !important;
  color: var(--shc-text) !important;
}

/* ─── Totals / order summary ─────────────────────────────────────────────── */
.wc-block-components-totals-item,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__quantity,
.wc-block-cart__totals-title,
.wc-block-cart-items,
.wc-block-components-checkout-step__content {
  font-family: var(--shc-font-main) !important;
}

/* ─── Notices ────────────────────────────────────────────────────────────── */
.wc-block-components-notice-banner,
.wc-block-store-notice {
  font-family: var(--shc-font-main) !important;
}

/* ─── Cart & checkout page general links ────────────────────────────────── */
.woocommerce-cart a,
.woocommerce-checkout a {
  font-family: var(--shc-font-main);
}

/* ─── Cart item assembly details: proper 2-column table ─────────────────── */
/*
 * WooCommerce Blocks wraps each dt+dd pair in a <span> and inserts
 * a <span class="...__separator"> / </span> between items.
 * Structure: <dl> > <span> > <dt> + <dd> + <span.separator>
 * We use CSS table layout so each <span> becomes a row and dt/dd become cells.
 */
.wc-block-components-product-details {
  display: table !important;
  width: 100% !important;
  border-collapse: collapse !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 6px !important;
  margin: 10px 0 4px !important;
  font-size: 0.82rem !important;
  overflow: hidden !important;
}

/* Each <span> child = one table row */
.wc-block-components-product-details > span {
  display: table-row !important;
}

/* Label cell */
.wc-block-components-product-details__name {
  display: table-cell !important;
  padding: 6px 10px !important;
  border-bottom: 1px solid #e8e8e8 !important;
  font-weight: 600 !important;
  background: #f6f6f6 !important;
  color: #555 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  width: 1px !important; /* shrink to content width */
}

/* Value cell */
.wc-block-components-product-details__value {
  display: table-cell !important;
  padding: 6px 10px !important;
  border-bottom: 1px solid #e8e8e8 !important;
  background: #fff !important;
  vertical-align: middle !important;
  word-break: break-word !important;
}

/* Reset the <pre> WooCommerce puts around values */
.wc-block-components-product-details__value pre {
  font-family: inherit !important;
  font-size: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: normal !important;
  word-break: break-word !important;
  background: none !important;
  border: none !important;
}

/* Hide the aria-hidden " / " separator spans WooCommerce injects between items */
.wc-block-components-product-details [aria-hidden="true"] {
  display: none !important;
}

/* Remove bottom border on last row */
.wc-block-components-product-details
  > span:last-of-type
  .wc-block-components-product-details__name,
.wc-block-components-product-details
  > span:last-of-type
  .wc-block-components-product-details__value {
  border-bottom: none !important;
}

/* Prevent overflow on the broader cart item wrapper */
.wc-block-components-order-summary-item__description,
.wc-block-cart-item__product-details {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

/* ─── Stack product details full-width below image in checkout sidebar ─────── */
.wc-block-components-order-summary-item {
  display: grid !important;
  grid-template-columns: 60px 1fr auto !important;
  gap: 5px 15px !important;
  align-items: start !important;
  margin-bottom: 24px !important;
}
.wc-block-components-order-summary-item__description {
  display: contents !important;
}
.wc-block-components-order-summary-item__image {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  margin: 0 !important;
  width: 100% !important;
}
.wc-block-components-product-name {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  align-self: end !important;
}
.wc-block-components-order-summary-item__total-price {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: end !important;
}
.wc-block-cart-item__prices {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  align-self: start !important;
}
.wc-block-components-product-metadata {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  width: 100% !important;
  margin-top: 15px !important;
}

/* Stack the individual table cells vertically */
.wc-block-components-order-summary .wc-block-components-product-details > span {
  display: flex !important;
  flex-direction: column !important;
}
.wc-block-components-order-summary .wc-block-components-product-details__name {
  display: block !important;
  width: 100% !important;
  border-bottom: none !important;
  padding-bottom: 2px !important;
  white-space: normal !important;
}
.wc-block-components-order-summary .wc-block-components-product-details__value {
  display: block !important;
  width: 100% !important;
  padding-top: 2px !important;
}

/* Responsive cart item table layout for mobile */
@media (max-width: 768px) {
  /* 1. Main Row becomes the Grid */
  .wc-block-cart-items__row {
    display: grid !important;
    grid-template-columns: 80px 1fr auto !important;
    gap: 5px 15px !important;
    align-items: start !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #eaeaea !important;
    margin-bottom: 20px !important;
  }

  /* 2. Unwrap intermediate divs so their children join the grid */
  .wc-block-cart-item__product,
  .wc-block-cart-item__wrap,
  .wc-block-components-product-metadata {
    display: contents !important;
  }

  /* 3. Image placement */
  .wc-block-cart-item__image {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 100% !important;
  }

  /* 4. Name & Total Price on the top row */
  .wc-block-components-product-name {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
  }
  .wc-block-cart-item__total {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: end !important;
    text-align: right !important;
  }

  /* 5. Unit Price below the name */
  .wc-block-cart-item__prices {
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;
    align-self: start !important;
  }

  /* 6. Product Details Table spans full width below */
  .wc-block-components-product-details {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }

  /* 7. Quantity & Remove span full width at the bottom */
  .wc-block-cart-item__quantity {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
  }

  /* Break the table layout to stack vertically */
  .wc-block-components-product-details > span {
    display: flex !important;
    flex-direction: column !important;
  }
  .wc-block-components-product-details__name {
    display: block !important;
    width: 100% !important;
    border-bottom: none !important;
    padding-bottom: 2px !important;
    white-space: normal !important;
  }
  .wc-block-components-product-details__value {
    display: block !important;
    width: 100% !important;
    padding-top: 2px !important;
  }
}

/* ─── Footer Fixes for WooCommerce Pages ────────────────────────────────── */
.payment-icons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 2.5rem !important;
  margin-bottom: 2rem !important;
  flex-wrap: wrap !important;
}

.payment-icons img,
.payment-icons svg {
  height: 32px !important;
  width: auto !important;
  max-width: 120px !important;
  opacity: 0.9 !important;
  filter: brightness(0) invert(1) !important;
  object-fit: contain !important;
}

.payment-icons img:hover,
.payment-icons svg:hover {
  opacity: 1 !important;
}

/* ─── My Account Page ────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce {
  display: flex !important;
  flex-direction: row !important;
  gap: 3rem !important;
  margin-top: 3rem !important;
  align-items: flex-start !important;
}

@media (max-width: 991px) {
  .woocommerce-account .woocommerce {
    flex-direction: column !important;
    gap: 2.5rem !important;
  }
}

/* Sidebar Navigation */
.woocommerce-MyAccount-navigation {
  flex: 0 0 280px !important;
  background: var(--shc-white) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
  width: 100% !important;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid #f1f5f9 !important;
}

.woocommerce-MyAccount-navigation li:last-child {
  border-bottom: none !important;
}

.woocommerce-MyAccount-navigation li a {
  display: flex !important;
  align-items: center !important;
  padding: 1.1rem 1.5rem !important;
  color: var(--shc-text) !important;
  font-family: var(--shc-font-main) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  font-size: 0.95rem !important;
}

.woocommerce-MyAccount-navigation li a:hover {
  background: var(--shc-gray-light) !important;
  color: var(--shc-accent) !important;
  padding-left: 1.75rem !important;
}

.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--shc-primary) !important;
  color: var(--shc-white) !important;
}

/* Content Area */
.woocommerce-MyAccount-content {
  flex: 1 !important;
  font-family: var(--shc-font-main) !important;
  line-height: 1.7 !important;
  background: var(--shc-white) !important;
  padding: 2.5rem !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: var(--shc-font-head) !important;
  color: var(--shc-primary) !important;
  font-weight: 700 !important;
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
  letter-spacing: -0.02em !important;
}

.woocommerce-MyAccount-content p {
  margin-bottom: 1.5rem !important;
  color: #4a5568 !important;
}

/* Dashboard link highlight */
.woocommerce-MyAccount-content a:not(.button):not(.btn) {
  color: var(--shc-accent) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: border-color 0.3s !important;
}

.woocommerce-MyAccount-content a:not(.button):not(.btn):hover {
  border-bottom-color: var(--shc-accent) !important;
}

/* My Account Tables */
.woocommerce-MyAccount-content table.shop_table {
  border: none !important;
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 1.5rem 0 !important;
}

.woocommerce-MyAccount-content table.shop_table thead th {
  background: var(--shc-gray-light) !important;
  font-family: var(--shc-font-head) !important;
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  padding: 1rem 1.5rem !important;
  color: #718096 !important;
  border-bottom: 2px solid #edf2f7 !important;
  text-align: left !important;
}

.woocommerce-MyAccount-content table.shop_table tbody td {
  padding: 1.2rem 1.5rem !important;
  border-bottom: 1px solid #edf2f7 !important;
  vertical-align: middle !important;
}

.woocommerce-MyAccount-content table.shop_table tr:last-child td {
  border-bottom: none !important;
}

/* My Account Forms */
.woocommerce-EditAccountForm fieldset,
.woocommerce-address-fields fieldset {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 2rem !important;
  margin: 2.5rem 0 !important;
  background: #f8fafc !important;
}

.woocommerce-EditAccountForm legend {
  font-family: var(--shc-font-head) !important;
  font-weight: 700 !important;
  color: var(--shc-primary) !important;
  padding: 0 1rem !important;
  font-size: 1.1rem !important;
}

.woocommerce-form-row {
  margin-bottom: 1.5rem !important;
}

.woocommerce-form-row label {
  display: block !important;
  font-weight: 600 !important;
  margin-bottom: 0.6rem !important;
  color: var(--shc-text) !important;
  font-size: 0.9rem !important;
}

/* Inputs & Textareas */
.woocommerce-Input,
.woocommerce-Select,
.woocommerce-input-wrapper input,
.woocommerce-input-wrapper select,
.woocommerce-input-wrapper textarea {
  width: 100% !important;
  padding: 0.9rem 1.2rem !important;
  background-color: var(--shc-gray-light) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  font-family: var(--shc-font-main) !important;
  font-size: 1rem !important;
  color: var(--shc-text) !important;
  transition: all 0.3s ease !important;
}

.woocommerce-Input:focus,
.woocommerce-Select:focus,
.woocommerce-input-wrapper input:focus,
.woocommerce-input-wrapper textarea:focus {
  background-color: var(--shc-white) !important;
  border-color: var(--shc-primary) !important;
  box-shadow: 0 0 0 3px rgba(47, 37, 96, 0.1) !important;
  outline: none !important;
}

/* Buttons */
.woocommerce-Button,
.woocommerce-button,
.woocommerce-EditAccountForm .button,
.woocommerce-address-fields .button {
  display: inline-block !important;
  padding: 1rem 2.5rem !important;
  background-color: var(--shc-accent) !important;
  color: var(--shc-white) !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: var(--shc-font-head) !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
  box-shadow: 0 4px 14px rgba(240, 52, 0, 0.3) !important;
}

.woocommerce-Button:hover,
.woocommerce-button:hover,
.woocommerce-EditAccountForm .button:hover {
  background-color: var(--shc-accent-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(240, 52, 0, 0.4) !important;
}

/* Address Card Layout */
.woocommerce-account .u-columns.col2-set {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2rem !important;
  margin-top: 1rem !important;
}

/* Hide WooCommerce clearfix pseudo-elements so they don't break the Grid layout */
.woocommerce-account .u-columns.col2-set::before,
.woocommerce-account .u-columns.col2-set::after {
  display: none !important;
}

.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  background: #f8fafc !important;
  padding: 2.5rem !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.woocommerce-Address-title {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin-bottom: 1rem !important;
}

/* Hide clearfix pseudo-elements to stop them from becoming flex items and centering the h2 */
.woocommerce-Address-title::before,
.woocommerce-Address-title::after {
  display: none !important;
}

/* On mobile, stack the Edit link below the title to prevent text squishing */
@media (max-width: 768px) {
  .woocommerce-Address-title {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
  margin: 0 !important;
  font-size: 1.5rem !important;
}

.woocommerce-Address-title .edit {
  color: var(--shc-accent) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

address {
  font-style: normal !important;
  color: #4a5568 !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

/* Fix for Account Details form rows */
.woocommerce-EditAccountForm .form-row,
.woocommerce-address-fields .form-row {
  display: block !important;
  width: 100% !important;
  margin-bottom: 1.5rem !important;
  float: none !important;
}

.woocommerce-EditAccountForm .form-row-first,
.woocommerce-EditAccountForm .form-row-last,
.woocommerce-address-fields .form-row-first,
.woocommerce-address-fields .form-row-last {
  width: 48% !important;
  display: inline-block !important;
  vertical-align: top !important;
}

.woocommerce-EditAccountForm .form-row-first,
.woocommerce-address-fields .form-row-first {
  margin-right: 4% !important;
}

@media (max-width: 768px) {
  .woocommerce-EditAccountForm .form-row-first,
  .woocommerce-EditAccountForm .form-row-last,
  .woocommerce-address-fields .form-row-first,
  .woocommerce-address-fields .form-row-last {
    width: 100% !important;
    margin-right: 0 !important;
  }
}

.woocommerce-EditAccountForm label,
.woocommerce-address-fields label {
  display: block !important;
  margin-bottom: 0.5rem !important;
  font-weight: 600 !important;
}

@media (max-width: 768px) {
  .woocommerce-account .woocommerce {
    flex-direction: column !important;
  }
  .woocommerce-MyAccount-navigation {
    flex: none !important;
    width: 100% !important;
  }
}

/* ========================================================== */
/* LOGIN & REGISTRATION FORM RE-LAYOUT                        */
/* ========================================================== */

/* Make form rows stack properly instead of side-by-side */
.woocommerce-form-login,
.woocommerce-form-register {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 1.5rem 1rem !important;
  margin-top: 1rem !important;
}

.woocommerce-form-login .woocommerce-form-row,
.woocommerce-form-register .woocommerce-form-row {
  grid-column: 1 / -1 !important;
  display: block !important;
  width: 100% !important;
}

.woocommerce-form-login .woocommerce-form-row label,
.woocommerce-form-register .woocommerce-form-row label {
  display: block !important;
  margin-bottom: 0.5rem !important;
  font-weight: 600 !important;
  color: var(--shc-primary) !important;
}

/* Extract the Checkbox and Button from their wrapper p tag */
.woocommerce-form-login > .form-row:not(.woocommerce-form-row) {
  display: contents !important;
}

/* Row 3: Remember Me (Left) */
.woocommerce-form-login .woocommerce-form__label-for-checkbox {
  grid-column: 1 !important;
  grid-row: 3 !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  color: #4a5568 !important;
}

/* Row 3: Lost Password (Right) */
.woocommerce-form-login .woocommerce-LostPassword {
  grid-column: 2 !important;
  grid-row: 3 !important;
  align-self: center !important;
  margin: 0 !important;
}
.woocommerce-form-login .woocommerce-LostPassword a {
  color: var(--shc-primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.woocommerce-form-login .woocommerce-LostPassword a:hover {
  text-decoration: underline !important;
}

/* Row 4: Submit Button */
.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-form-register .woocommerce-Button {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  width: 100% !important;
  padding: 1rem !important;
  margin-top: 0.5rem !important;
}

/* Ensure password inputs are full width */
.woocommerce-form-login .password-input,
.woocommerce-form-register .password-input {
  display: block !important;
  width: 100% !important;
}

/* ─── Center login / register form on My Account (logged-out state) ────────
 * The .woocommerce-account .woocommerce flex rule (sidebar + content layout)
 * applies to the login page too, pushing the h2 and form side-by-side.
 * Override it for logged-out visitors and center the card instead.
 * ─────────────────────────────────────────────────────────────────────────── */
.woocommerce-account:not(.logged-in) .woocommerce {
  display: block !important;
  max-width: 480px !important;
  margin: 0 auto !important;
}

.woocommerce-account:not(.logged-in) .woocommerce h2 {
  text-align: center !important;
  margin-bottom: 1.5rem !important;
}

/* ─── Custom Empty Cart State ────────────────────────────────────────────── */
.empty-cart-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 4rem 1.5rem !important;
  text-align: center !important;
}

.empty-cart-card {
  max-width: 600px !important;
  width: 100% !important;
  background: var(--shc-white) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 3.5rem 2.5rem !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.empty-cart-icon-wrapper {
  background-color: var(--shc-gray-light) !important;
  color: var(--shc-primary) !important;
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 2rem !important;
  transition: all 0.3s ease !important;
}

.empty-cart-card:hover .empty-cart-icon-wrapper {
  transform: translateY(-4px) !important;
  background-color: var(--shc-primary) !important;
  color: var(--shc-white) !important;
}

.empty-cart-icon {
  width: 42px !important;
  height: 42px !important;
}

.empty-cart-title {
  font-family: var(--shc-font-head) !important;
  color: var(--shc-primary) !important;
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  margin: 0 0 1rem 0 !important;
  letter-spacing: -0.02em !important;
}

.empty-cart-desc {
  font-family: var(--shc-font-main) !important;
  color: #4a5568 !important;
  font-size: 1.1rem !important;
  line-height: 1.7 !important;
  margin: 0 0 2.5rem 0 !important;
  max-width: 480px !important;
}

.empty-cart-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  width: 100% !important;
  max-width: 380px !important;
}

@media (min-width: 576px) {
  .empty-cart-actions {
    flex-direction: row !important;
    justify-content: center !important;
    max-width: 100% !important;
    gap: 1.25rem !important;
  }
}

.empty-cart-actions .btn {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-transform: uppercase !important;
  font-family: var(--shc-font-head) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  border-radius: 6px !important;
  padding: 1rem 2rem !important;
  font-size: 0.95rem !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  width: 100% !important;
}

@media (min-width: 576px) {
  .empty-cart-actions .btn {
    width: auto !important;
  }
}

.empty-cart-actions .btn-primary {
  background-color: var(--shc-accent) !important;
  color: var(--shc-white) !important;
  border: 2px solid var(--shc-accent) !important;
  box-shadow: 0 4px 14px rgba(240, 52, 0, 0.25) !important;
}

.empty-cart-actions .btn-primary:hover {
  background-color: var(--shc-accent-dark) !important;
  border-color: var(--shc-accent-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(240, 52, 0, 0.35) !important;
}

.empty-cart-actions .btn-outline {
  background-color: transparent !important;
  color: var(--shc-primary) !important;
  border: 2px solid var(--shc-primary) !important;
}

.empty-cart-actions .btn-outline:hover {
  background-color: var(--shc-primary) !important;
  color: var(--shc-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(47, 37, 96, 0.15) !important;
}

/* ─── Checkout: Fix Overlapping Placeholder and Label ──────────────────── */
/* Hide placeholder text by default on WooCommerce block text inputs to prevent overlapping with floating labels */
.wc-block-components-text-input input::placeholder {
  color: transparent !important;
  opacity: 0 !important;
  transition: color 0.15s ease, opacity 0.15s ease !important;
}

.wc-block-components-text-input input::-webkit-input-placeholder {
  color: transparent !important;
  opacity: 0 !important;
  transition: color 0.15s ease, opacity 0.15s ease !important;
}

.wc-block-components-text-input input::-moz-placeholder {
  color: transparent !important;
  opacity: 0 !important;
  transition: color 0.15s ease, opacity 0.15s ease !important;
}

.wc-block-components-text-input input:-ms-input-placeholder {
  color: transparent !important;
  opacity: 0 !important;
  transition: color 0.15s ease, opacity 0.15s ease !important;
}

/* Show placeholder when the field is focused/active */
.wc-block-components-text-input.is-active input::placeholder,
.wc-block-components-text-input input:focus::placeholder {
  color: #718096 !important;
  opacity: 1 !important;
}

.wc-block-components-text-input.is-active input::-webkit-input-placeholder,
.wc-block-components-text-input input:focus::-webkit-input-placeholder {
  color: #718096 !important;
  opacity: 1 !important;
}

.wc-block-components-text-input.is-active input::-moz-placeholder,
.wc-block-components-text-input input:focus::-moz-placeholder {
  color: #718096 !important;
  opacity: 1 !important;
}

.wc-block-components-text-input.is-active input:-ms-input-placeholder,
.wc-block-components-text-input input:focus:-ms-input-placeholder {
  color: #718096 !important;
  opacity: 1 !important;
}


/* ─── Shipping Method Toggle Switch (Theme Style Sync) ───────────────────── */

/* Container styling for WooCommerce Blocks shipping rates */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control {
  display: flex !important;
  flex-direction: row !important;
  background-color: var(--shc-primary) !important;
  border: 2px solid var(--shc-primary) !important;
  border-radius: 30px !important;
  padding: 3px !important;
  position: relative !important;
  width: 100% !important;
  max-width: 480px !important;
  margin: 18px 0 !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Hide default radio buttons */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* Option wrappers */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option {
  flex: 1 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  position: relative !important;
  list-style: none !important;
}

/* Label styling */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  border-radius: 25px !important;
  font-family: var(--shc-font-head) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  color: rgba(255, 255, 255, 0.75) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.75px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 40px !important;
}

/* Hover style for non-checked options */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option:hover .wc-block-components-radio-control__label {
  color: var(--shc-white) !important;
}

/* Checked option label (sibling selector) */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__input:checked + .wc-block-components-radio-control__label {
  background-color: var(--shc-white) !important;
  color: var(--shc-primary) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

/* Checked option label (parent :has selector support for nested inputs) */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__label:has(.wc-block-components-radio-control__input:checked) {
  background-color: var(--shc-white) !important;
  color: var(--shc-primary) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

/* Selected option fallback class */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option--selected .wc-block-components-radio-control__label {
  background-color: var(--shc-white) !important;
  color: var(--shc-primary) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}


/* ─── Classic WooCommerce Shipping Method Toggle ───────────────────────── */

ul#shipping_method {
  display: flex !important;
  flex-direction: row !important;
  background-color: var(--shc-primary) !important;
  border: 2px solid var(--shc-primary) !important;
  border-radius: 30px !important;
  padding: 3px !important;
  position: relative !important;
  width: 100% !important;
  max-width: 480px !important;
  margin: 18px 0 !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  list-style: none !important;
}

ul#shipping_method li {
  flex: 1 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  position: relative !important;
  list-style: none !important;
}

ul#shipping_method li::before {
  display: none !important; /* Hide list bullets/icons if any */
}

ul#shipping_method input.shipping_method {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

ul#shipping_method label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  border-radius: 25px !important;
  font-family: var(--shc-font-head) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  color: rgba(255, 255, 255, 0.75) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.75px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 40px !important;
}

/* Hover style for non-checked options */
ul#shipping_method li:hover label {
  color: var(--shc-white) !important;
}

/* Checked option label */
ul#shipping_method input.shipping_method:checked + label {
  background-color: var(--shc-white) !important;
  color: var(--shc-primary) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

ul#shipping_method label:has(input.shipping_method:checked) {
  background-color: var(--shc-white) !important;
  color: var(--shc-primary) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

/* Ensure all nested text elements (like prices or details) inherit the parent toggle's color.
   Scoped to cart only — checkout card handles its own colors. */
.wc-block-cart .wc-block-components-shipping-rates-control .wc-block-components-radio-control__label *,
ul#shipping_method label * {
  color: inherit !important;
  transition: color 0.25s ease !important;
}

/* Prevent checkout card text from ever going white via the cart toggle color inheritance */
.wc-block-checkout__shipping-option .wc-block-components-radio-control__label *,
.wc-block-checkout__shipping-option .wc-block-components-radio-control__secondary-label,
.wc-block-checkout__shipping-option .shc-shipping-eta {
  color: var(--shc-text) !important;
  transition: none !important;
}

/* ─── Checkout shipping option — card style ──────────────────────────────── */

/* 1. Reset the pill container */
.wc-block-checkout__shipping-option .wc-block-components-shipping-rates-control .wc-block-components-radio-control {
  display: block !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* 2. The <label> element (.wc-block-components-radio-control__option) is the card */
.wc-block-checkout__shipping-option .wc-block-components-radio-control__option {
  flex: none !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 16px !important;
  margin-bottom: 10px !important;
  border: 2px solid #e0e0e0 !important;
  border-radius: 10px !important;
  background: var(--shc-white) !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.wc-block-checkout__shipping-option .wc-block-components-radio-control__option:hover {
  border-color: #bbb !important;
  box-shadow: none !important;
}

.wc-block-checkout__shipping-option .wc-block-components-radio-control__option-checked,
.wc-block-checkout__shipping-option .wc-block-components-radio-control__option--checked-option-highlighted {
  border-color: var(--shc-primary) !important;
  box-shadow: 0 0 0 1px var(--shc-primary) !important;
}

/* 3. Hide the radio input */
.wc-block-checkout__shipping-option .wc-block-components-radio-control__input {
  display: none !important;
}

/* 4. Layout div fills the rest of the card */
.wc-block-checkout__shipping-option .wc-block-components-radio-control__option-layout {
  display: flex !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* 5. Label group: name + price on top row, eta below */
.wc-block-checkout__shipping-option .wc-block-components-radio-control__label-group {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  row-gap: 3px !important;
  flex: 1 !important;
  align-items: baseline !important;
}

/* 6. Method name — top-left. Reset ALL general toggle overrides. */
.wc-block-checkout__shipping-option .wc-block-components-radio-control__label,
.wc-block-checkout__shipping-option .wc-block-components-radio-control__option:hover .wc-block-components-radio-control__label,
.wc-block-checkout__shipping-option .wc-block-components-radio-control__option--checked-option-highlighted .wc-block-components-radio-control__label {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: block !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  color: var(--shc-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  justify-content: flex-start !important;
  align-items: unset !important;
  min-height: unset !important;
  cursor: pointer !important;
}

/* 7. Price — top-right */
.wc-block-checkout__shipping-option .wc-block-components-radio-control__secondary-label,
.wc-block-checkout__shipping-option .wc-block-components-radio-control__option:hover .wc-block-components-radio-control__secondary-label {
  grid-column: 2 !important;
  grid-row: 1 !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: var(--shc-text) !important;
  white-space: nowrap !important;
}

/* 8. ETA note — full-width second row */
.shc-shipping-eta {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: block !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  color: #777 !important;
  margin: 0 !important;
}

/* Cart page delivery/pickup notes */
.shc-delivery-note,
.shc-pickup-note {
  font-size: 0.8rem;
  color: #555;
  text-align: center;
  margin-top: 6px;
  display: none;
}
.shc-delivery-note.visible,
.shc-pickup-note.visible {
  display: block;
}

/* Custom Injected Cart Shipping Toggle */
.shc-cart-toggle-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 25px 0 20px !important;
  padding: 16px !important;
  background-color: var(--shc-white) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

.shc-cart-toggle-title {
  font-family: var(--shc-font-head) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  color: var(--shc-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 0 !important;
}

.shc-cart-toggle-container .toggleCheckbox {
  display: none !important;
}

.shc-cart-toggle-container .toggleContainer {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  width: 100% !important;
  max-width: 320px !important;
  border: 2px solid var(--shc-primary) !important;
  border-radius: 25px !important;
  background-color: var(--shc-primary) !important;
  font-weight: bold !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 2px !important;
  user-select: none !important;
}

.shc-cart-toggle-container .toggleContainer::before {
  content: '' !important;
  position: absolute !important;
  width: calc(50% - 4px) !important;
  height: calc(100% - 4px) !important;
  top: 2px !important;
  left: 2px !important;
  border-radius: 22px !important;
  background: var(--shc-white) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
  z-index: 0 !important;
}

.shc-cart-toggle-container .toggleCheckbox:checked + .toggleContainer::before {
  left: calc(50% + 2px) !important;
}

.shc-cart-toggle-container .toggleContainer div {
  padding: 10px 15px !important;
  text-align: center !important;
  z-index: 1 !important;
  font-family: var(--shc-font-head) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: color 0.3s ease !important;
  user-select: none !important;
}

/* Checked: Pickup is active (right), Delivery is inactive (left) */
.shc-cart-toggle-container .toggleCheckbox:checked + .toggleContainer .toggle-delivery {
  color: rgba(255, 255, 255, 0.75) !important;
}
.shc-cart-toggle-container .toggleCheckbox:checked + .toggleContainer .toggle-pickup {
  color: var(--shc-primary) !important;
}

/* Unchecked: Delivery is active (left), Pickup is inactive (right) */
.shc-cart-toggle-container .toggleCheckbox:not(:checked) + .toggleContainer .toggle-delivery {
  color: var(--shc-primary) !important;
}
.shc-cart-toggle-container .toggleCheckbox:not(:checked) + .toggleContainer .toggle-pickup {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ─── Cart Item adjustments (Align table and hide redundant text) ──────────────── */
.wc-block-cart .wc-block-components-product-name,
.wc-block-cart .wc-block-cart-item__prices {
  display: none !important;
}

/* Ensure the metadata table aligns nicely with the top of the image */
.wc-block-cart .wc-block-components-product-metadata {
  margin-top: 0 !important;
}

/* Prevent long assembly codes from overflowing the order details table */
.woocommerce-table--order-details .wc-item-meta p,
.woocommerce-table--order-details .wc-item-meta li {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Hide the separator above the metadata table since the name is hidden */
.wc-block-cart .wc-block-components-product-details {
  margin-top: 0 !important;
}

/* Hide "Add coupons" on the cart page only */
.woocommerce-cart .wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-totals-coupon {
  display: none !important;
}

/* Cart item: square image + centered price — mobile only */
@media (max-width: 768px) {
  html body table.wc-block-cart-items tbody .wc-block-cart-items__row .wc-block-cart-item__image img {
    width: 100px !important;
    height: 100px !important;
    max-width: 100px !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
  }

  html body table.wc-block-cart-items tbody .wc-block-cart-items__row td.wc-block-cart-item__total {
    text-align: center !important;
    vertical-align: middle !important;
    align-self: center !important;
  }

  html body table.wc-block-cart-items tbody .wc-block-cart-items__row .wc-block-cart-item__total-price-and-sale-badge-wrapper {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
  }

  html body table.wc-block-cart-items tbody .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price {
    text-align: center !important;
    justify-content: center !important;
  }
}