/* ============================================
   EngravingCanada Shop styling
   Applied to cart, checkout, my-account, and order-confirmation pages.
   All rules are scoped under the relevant WC body class so nothing
   here can leak into homepage, shop browsing, or product detail pages.
   Relies on tokens defined in engravingcanada-brand.css.
   ============================================ */

/* Shared scope mixin selector — the four pages this stylesheet styles */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.woocommerce-order-received {
  background-color: var(--ec-bg-light);
  color: var(--ec-text-body);
}

/* Page container + breathing room */
body.woocommerce-cart .page-wrapper,
body.woocommerce-checkout .page-wrapper,
body.woocommerce-account .page-wrapper,
body.woocommerce-order-received .page-wrapper {
  background-color: var(--ec-bg-light);
  padding-top: 2rem;
  padding-bottom: 4rem;
}

/* ---------- Headings ---------- */
body.woocommerce-cart h1,
body.woocommerce-cart h2,
body.woocommerce-cart h3,
body.woocommerce-checkout h1,
body.woocommerce-checkout h2,
body.woocommerce-checkout h3,
body.woocommerce-account h1,
body.woocommerce-account h2,
body.woocommerce-account h3,
body.woocommerce-order-received h1,
body.woocommerce-order-received h2,
body.woocommerce-order-received h3 {
  font-family: var(--ec-font-display);
  color: var(--ec-text-dark);
  font-weight: 600;
  letter-spacing: -0.01em;
}
body.woocommerce-cart h1.entry-title,
body.woocommerce-checkout h1.entry-title,
body.woocommerce-account h1.entry-title,
body.woocommerce-order-received h1.entry-title {
  margin-bottom: 1.5rem;
  font-size: clamp(2rem, 4vw, 2.75rem);
}
body.woocommerce-cart h2,
body.woocommerce-checkout h2,
body.woocommerce-account h2,
body.woocommerce-order-received h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  margin-bottom: 1rem;
}
body.woocommerce-cart h3,
body.woocommerce-checkout h3,
body.woocommerce-account h3,
body.woocommerce-order-received h3 {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}

/* ---------- Buttons ---------- */
/* Primary WC buttons: champagne gold pill, terracotta on hover, lift effect */
body.woocommerce-cart .button,
body.woocommerce-cart button[type="submit"],
body.woocommerce-cart input[type="submit"],
body.woocommerce-cart .checkout-button,
body.woocommerce-checkout .button,
body.woocommerce-checkout button[type="submit"],
body.woocommerce-checkout input[type="submit"],
body.woocommerce-checkout #place_order,
body.woocommerce-account .button,
body.woocommerce-account button[type="submit"],
body.woocommerce-account input[type="submit"],
body.woocommerce-order-received .button {
  background-color: var(--ec-primary);
  color: var(--ec-text-dark);
  font-family: var(--ec-font-body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.75rem;
  border: 0;
  border-radius: var(--ec-radius-pill);
  text-transform: none;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(30, 26, 20, 0.08);
  transition: background-color var(--ec-transition), color var(--ec-transition), transform var(--ec-transition), box-shadow var(--ec-transition);
  cursor: pointer;
  line-height: 1.4;
}
body.woocommerce-cart .button:hover,
body.woocommerce-cart button[type="submit"]:hover,
body.woocommerce-cart input[type="submit"]:hover,
body.woocommerce-cart .checkout-button:hover,
body.woocommerce-checkout .button:hover,
body.woocommerce-checkout button[type="submit"]:hover,
body.woocommerce-checkout input[type="submit"]:hover,
body.woocommerce-checkout #place_order:hover,
body.woocommerce-account .button:hover,
body.woocommerce-account button[type="submit"]:hover,
body.woocommerce-account input[type="submit"]:hover,
body.woocommerce-order-received .button:hover {
  background-color: var(--ec-primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(163, 88, 56, 0.25);
}

/* Bigger emphasis for the two most important buttons */
body.woocommerce-cart .checkout-button,
body.woocommerce-checkout #place_order {
  font-size: 1.05rem;
  padding: 1rem 2.25rem;
}

/* Secondary/ghost button look for less-important actions */
body.woocommerce-cart .button[name="update_cart"],
body.woocommerce-cart .button.wp-element-button[name="update_cart"] {
  background-color: transparent;
  color: var(--ec-text-body);
  border: 1px solid var(--ec-border);
  box-shadow: none;
}
body.woocommerce-cart .button[name="update_cart"]:hover {
  background-color: var(--ec-bg-warm);
  color: var(--ec-text-dark);
  border-color: var(--ec-primary);
  transform: none;
  box-shadow: none;
}

/* Disabled / inactive update-cart styling */
body.woocommerce-cart .button[disabled],
body.woocommerce-cart .button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Form inputs ---------- */
body.woocommerce-cart input[type="text"],
body.woocommerce-cart input[type="email"],
body.woocommerce-cart input[type="tel"],
body.woocommerce-cart input[type="number"],
body.woocommerce-cart input[type="password"],
body.woocommerce-cart select,
body.woocommerce-cart textarea,
body.woocommerce-checkout input[type="text"],
body.woocommerce-checkout input[type="email"],
body.woocommerce-checkout input[type="tel"],
body.woocommerce-checkout input[type="number"],
body.woocommerce-checkout input[type="password"],
body.woocommerce-checkout select,
body.woocommerce-checkout textarea,
body.woocommerce-checkout .select2-selection,
body.woocommerce-account input[type="text"],
body.woocommerce-account input[type="email"],
body.woocommerce-account input[type="tel"],
body.woocommerce-account input[type="number"],
body.woocommerce-account input[type="password"],
body.woocommerce-account select,
body.woocommerce-account textarea {
  background-color: var(--ec-bg-warm);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  padding: 0.75rem 1rem;
  font-family: var(--ec-font-body);
  font-size: 0.95rem;
  color: var(--ec-text-body);
  width: 100%;
  box-shadow: none;
  transition: border-color var(--ec-transition), box-shadow var(--ec-transition);
  line-height: 1.4;
}
body.woocommerce-cart input:focus,
body.woocommerce-cart select:focus,
body.woocommerce-cart textarea:focus,
body.woocommerce-checkout input:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout textarea:focus,
body.woocommerce-checkout .select2-selection:focus,
body.woocommerce-checkout .select2-container--open .select2-selection,
body.woocommerce-account input:focus,
body.woocommerce-account select:focus,
body.woocommerce-account textarea:focus {
  outline: none;
  border-color: var(--ec-primary);
  box-shadow: 0 0 0 3px rgba(198, 185, 145, 0.25);
  background-color: #fff;
}

/* Select2 dropdown (used by checkout country/state selects) */
body.woocommerce-checkout .select2-container--default .select2-selection--single {
  background-color: var(--ec-bg-warm);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  display: block !important;
  height: auto !important;
  min-height: 2.85rem !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  display: block !important;
  width: 100%;
  box-sizing: border-box !important;
  line-height: 1.5 !important;
  min-height: 2.85rem !important;
  height: auto !important;
  padding: 0.65rem 2.5rem 0.65rem 1rem !important;
  margin: 0 !important;
  color: var(--ec-text-body);
}
/* Native <select> fallback for country/state if select2 has not enhanced them */
body.woocommerce-checkout select#billing_country,
body.woocommerce-checkout select#billing_state,
body.woocommerce-checkout select#shipping_country,
body.woocommerce-checkout select#shipping_state {
  height: auto !important;
  min-height: 2.85rem !important;
  line-height: 1.5 !important;
  padding: 0.45rem 1rem !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: 0.5rem;
}
.select2-dropdown {
  border-color: var(--ec-border);
  border-radius: var(--ec-radius);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--ec-primary);
  color: var(--ec-text-dark);
}

/* Form row labels */
body.woocommerce-cart .form-row label,
body.woocommerce-checkout .form-row label,
body.woocommerce-account .form-row label {
  font-family: var(--ec-font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ec-text-body);
  margin-bottom: 0.35rem;
  text-transform: none;
  letter-spacing: 0.01em;
}
body.woocommerce-cart .form-row .required,
body.woocommerce-checkout .form-row .required,
body.woocommerce-account .form-row .required {
  color: var(--ec-primary-dark);
  text-decoration: none;
}
body.woocommerce-cart .form-row,
body.woocommerce-checkout .form-row,
body.woocommerce-account .form-row {
  margin-bottom: 1rem;
}

/* ---------- Quantity selector ---------- */
body.woocommerce-cart .quantity.ux-quantity,
body.woocommerce-checkout .quantity.ux-quantity {
  display: inline-flex !important;
  align-items: stretch !important;
  width: auto !important;
  vertical-align: middle;
}
body.woocommerce-cart .quantity input.qty,
body.woocommerce-checkout .quantity input.qty {
  text-align: center;
  height: 2.6rem !important;
  width: 3.4rem !important;
  min-width: 0 !important;
  padding: 0 0.35rem !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}
body.woocommerce-cart .quantity .ux-quantity__button,
body.woocommerce-checkout .quantity .ux-quantity__button {
  width: 2.6rem !important;
  min-width: 0 !important;
  height: 2.6rem !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  border: 1px solid var(--ec-border) !important;
  background-color: var(--ec-bg-warm) !important;
  color: var(--ec-text-dark) !important;
  border-radius: var(--ec-radius) !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
}
body.woocommerce-cart .quantity .ux-quantity__button--minus,
body.woocommerce-checkout .quantity .ux-quantity__button--minus {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
body.woocommerce-cart .quantity .ux-quantity__button--plus,
body.woocommerce-checkout .quantity .ux-quantity__button--plus {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* ---------- Tables (cart contents, order review, etc.) ---------- */
body.woocommerce-cart .shop_table,
body.woocommerce-checkout .shop_table,
body.woocommerce-order-received .shop_table {
  background-color: #fff;
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-card);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: var(--ec-shadow-card);
  width: 100%;
}
body.woocommerce-cart .shop_table thead th,
body.woocommerce-checkout .shop_table thead th,
body.woocommerce-order-received .shop_table thead th {
  background-color: var(--ec-bg-warm);
  color: var(--ec-text-dark);
  font-family: var(--ec-font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  padding: 1rem;
  border: 0;
  border-bottom: 1px solid var(--ec-border);
  text-align: left;
}
body.woocommerce-cart .shop_table tbody td,
body.woocommerce-checkout .shop_table tbody td,
body.woocommerce-order-received .shop_table tbody td {
  padding: 1rem;
  border-top: 1px solid var(--ec-border);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  vertical-align: middle;
  color: var(--ec-text-body);
  background-color: #fff;
}
body.woocommerce-cart .shop_table tfoot th,
body.woocommerce-cart .shop_table tfoot td,
body.woocommerce-checkout .shop_table tfoot th,
body.woocommerce-checkout .shop_table tfoot td,
body.woocommerce-order-received .shop_table tfoot th,
body.woocommerce-order-received .shop_table tfoot td {
  background-color: var(--ec-bg-warm);
  border-top: 1px solid var(--ec-border);
  padding: 0.85rem 1rem;
  font-family: var(--ec-font-body);
  color: var(--ec-text-dark);
}
body.woocommerce-cart .shop_table tfoot tr:last-child th,
body.woocommerce-cart .shop_table tfoot tr:last-child td,
body.woocommerce-checkout .shop_table tfoot tr:last-child th,
body.woocommerce-checkout .shop_table tfoot tr:last-child td {
  font-size: 1.1rem;
  font-weight: 600;
}

/* Product names in tables: nicer link styling */
body.woocommerce-cart .shop_table .product-name a,
body.woocommerce-checkout .shop_table .product-name a {
  color: var(--ec-text-dark);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--ec-transition);
}
body.woocommerce-cart .shop_table .product-name a:hover,
body.woocommerce-checkout .shop_table .product-name a:hover {
  color: var(--ec-primary-dark);
}

/* Remove button (x) in cart */
body.woocommerce-cart .product-remove a.remove {
  color: var(--ec-primary-dark);
  background: transparent;
  border-radius: 999px;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  font-weight: 400;
  transition: background-color var(--ec-transition), color var(--ec-transition);
}
body.woocommerce-cart .product-remove a.remove:hover {
  background-color: var(--ec-primary-dark);
  color: #fff;
}

/* Price columns: terracotta for emphasis */
body.woocommerce-cart .shop_table .product-price,
body.woocommerce-cart .shop_table .product-subtotal,
body.woocommerce-checkout .shop_table .product-total,
body.woocommerce-order-received .shop_table .product-total {
  color: var(--ec-primary-dark);
  font-weight: 500;
}

/* ---------- Cart totals card ---------- */
body.woocommerce-cart .cart_totals {
  background-color: #fff;
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-card);
  padding: 1.5rem;
  box-shadow: var(--ec-shadow-card);
}
body.woocommerce-cart .cart_totals h2 {
  margin-top: 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ec-border);
  margin-bottom: 1rem;
}
body.woocommerce-cart .cart_totals .shop_table {
  border: 0;
  box-shadow: none;
}
body.woocommerce-cart .cart_totals .shop_table th,
body.woocommerce-cart .cart_totals .shop_table td {
  background-color: transparent;
  border: 0;
  border-top: 1px solid var(--ec-border);
  padding: 0.85rem 0;
}
body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-cart .cart_totals .order-total td {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ec-text-dark);
}

/* Coupon row */
body.woocommerce-cart .coupon {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
body.woocommerce-cart .coupon label {
  display: none;
}
body.woocommerce-cart .coupon input.input-text {
  flex: 1 1 200px;
  max-width: 280px;
}

/* ---------- Checkout-specific layout ---------- */
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-shipping-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3,
body.woocommerce-checkout #order_review_heading {
  font-family: var(--ec-font-display);
  color: var(--ec-text-dark);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--ec-primary);
  margin-bottom: 1.5rem;
  display: inline-block;
}

/* Checkout cards: wrap billing + order-review in subtle white panels */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
  background-color: #fff;
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-card);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--ec-shadow-card);
}
body.woocommerce-checkout #order_review {
  background-color: #fff;
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-card);
  padding: 1.5rem;
  box-shadow: var(--ec-shadow-card);
}
body.woocommerce-checkout #order_review .shop_table {
  border: 0;
  box-shadow: none;
}
body.woocommerce-checkout #order_review .shop_table th,
body.woocommerce-checkout #order_review .shop_table td {
  background-color: transparent;
  border-color: var(--ec-border);
}

/* Payment methods box */
body.woocommerce-checkout #payment {
  background-color: var(--ec-bg-warm);
  border-radius: var(--ec-radius);
  padding: 1.25rem;
  margin-top: 1rem;
}
body.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--ec-border);
  padding-bottom: 1rem;
}
body.woocommerce-checkout #payment ul.payment_methods li {
  background-color: #fff;
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  padding: 0.85rem 1rem;
  margin-bottom: 0.5rem;
  transition: border-color var(--ec-transition);
}
body.woocommerce-checkout #payment ul.payment_methods li:hover,
body.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:checked + label {
  border-color: var(--ec-primary);
}
body.woocommerce-checkout #payment div.payment_box {
  background-color: var(--ec-bg-light);
  border-radius: var(--ec-radius);
  padding: 1rem;
  margin-top: 0.5rem;
  color: var(--ec-text-body);
}
body.woocommerce-checkout #payment div.payment_box::before {
  border-color: transparent transparent var(--ec-bg-light) transparent;
}

/* Login/coupon dropdowns at top of checkout */
body.woocommerce-checkout .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce-form-coupon-toggle {
  margin-bottom: 1rem;
}
body.woocommerce-checkout .woocommerce-form-login,
body.woocommerce-checkout .woocommerce-form-coupon {
  background-color: #fff;
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-card);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* ---------- Notices (info, success, error) ---------- */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error {
  background-color: var(--ec-bg-warm);
  border-left: 4px solid var(--ec-primary);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: var(--ec-radius);
  padding: 1rem 1.25rem;
  color: var(--ec-text-body);
  font-family: var(--ec-font-body);
}
body.woocommerce-cart .woocommerce-message,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-account .woocommerce-message {
  border-left-color: var(--ec-highlight);
}
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-account .woocommerce-error {
  border-left-color: var(--ec-primary-dark);
}

/* ---------- My Account navigation ---------- */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  border-bottom: 1px solid var(--ec-border);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: 0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.85rem 1rem;
  color: var(--ec-text-body);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--ec-transition), background-color var(--ec-transition);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  color: var(--ec-text-dark);
  background-color: var(--ec-bg-warm);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background-color: var(--ec-primary);
  color: var(--ec-text-dark);
  font-weight: 600;
}

/* ---------- Order received / thank-you page ---------- */
body.woocommerce-order-received .woocommerce-order {
  background-color: #fff;
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-card);
  padding: 2rem;
  box-shadow: var(--ec-shadow-card);
}
body.woocommerce-order-received .woocommerce-thankyou-order-received {
  font-family: var(--ec-font-display);
  font-size: 1.5rem;
  color: var(--ec-text-dark);
  margin-bottom: 1.5rem;
}
body.woocommerce-order-received ul.woocommerce-thankyou-order-details {
  background-color: var(--ec-bg-warm);
  border-radius: var(--ec-radius);
  padding: 1.25rem 1rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0 0 1.5rem 0;
}
body.woocommerce-order-received ul.woocommerce-thankyou-order-details li {
  border: 0;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ec-text-muted-light);
}
body.woocommerce-order-received ul.woocommerce-thankyou-order-details li strong {
  display: block;
  font-family: var(--ec-font-display);
  font-size: 1.1rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ec-text-dark);
  margin-top: 0.25rem;
  font-weight: 600;
}

/* ---------- Reduced-motion respect on transforms ---------- */
@media (prefers-reduced-motion: reduce) {
  body.woocommerce-cart .button,
  body.woocommerce-checkout .button,
  body.woocommerce-account .button,
  body.woocommerce-order-received .button {
    transition: background-color var(--ec-transition), color var(--ec-transition);
  }
  body.woocommerce-cart .button:hover,
  body.woocommerce-checkout .button:hover,
  body.woocommerce-account .button:hover,
  body.woocommerce-order-received .button:hover {
    transform: none;
  }
}