/* Shop-specific styles for WooCommerce pages */

/* Mentorpiece Brand Styling - Import Roboto Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');

/* Mentorpiece Brand Variables */
:root {
  --mp-orange: #FB6B00;
  --mp-primary-blue: #007bff;
  --mp-success-green: #28a745;
  --mp-danger-red: #dc3545;
  --mp-body-bg: #f8f9fa;
  --mp-card-bg: #ffffff;
  --mp-glass-bg: rgba(255, 255, 255, 0.25);
  --mp-primary-text: #212529;
  --mp-secondary-text: #6c757d;
  --mp-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --mp-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Global Brand Styling for WooCommerce pages */
.woocommerce body,
.woocommerce-page body {
  font-family: 'Roboto', sans-serif !important;
  background-color: var(--mp-body-bg) !important;
  color: var(--mp-primary-text) !important;
  line-height: 1.6 !important;
}

/* Cart Page Brand Styling */
.page-cart {
  background-color: var(--mp-body-bg);
  padding: 20px;
}

.page-cart h1 {
  font-size: 2.8rem !important;
  font-weight: 700 !important;
  color: var(--mp-primary-text) !important;
  border-bottom: 3px solid var(--mp-orange) !important;
  padding-bottom: 0.5rem !important;
  margin-bottom: 2rem !important;
  text-align: center !important;
}

/* Hide only "added to cart" notification message - specific targeting */
.woocommerce-message,
.woocommerce .woocommerce-message,
div.woocommerce-message {
  display: none !important;
}

/* Show login info blocks back */
.woocommerce-info {
  display: block !important;
}

/* Make data processing consent text match subscription text style */
.woocommerce-privacy-policy-text,
.woocommerce .woocommerce-privacy-policy-text {
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: normal !important;
  color: var(--mp-primary-text) !important;
  background-color: #f8f9fa !important;
  padding: 8px 12px !important;
  border-radius: 4px !important;
  margin: 8px 0 !important;
}

/* Keep subscription checkboxes at normal size */
.xoo-aff-required label,
.woocommerce .xoo-aff-required label,
.checkboxesBlock__body label {
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: normal !important;
  color: var(--mp-primary-text) !important;
}

/* Hide WooCommerce "Your order" heading ($M2P_MESSAGES['checkout_order_orig_*']) - comprehensive approach for all heading levels */
.cart-collaterals h1,
.cart-collaterals h2,
.cart-collaterals h3,
.cart-collaterals h4,
.woocommerce-cart .cart-collaterals h1,
.woocommerce-cart .cart-collaterals h2,
.woocommerce-cart .cart-collaterals h3,
.cart_totals h1,
.cart_totals h2,
.cart_totals h3,
.woocommerce .cart_totals h1,
.woocommerce .cart_totals h2,
.woocommerce .cart_totals h3,
.woocommerce-cart-form + .cart-collaterals h1,
.woocommerce-cart-form + .cart-collaterals h2,
.woocommerce-cart-form + .cart-collaterals h3,
.cart-collaterals .cart_totals h1,
.cart-collaterals .cart_totals h2,
.cart-collaterals .cart_totals h3,
.cart_totals > h1,
.cart_totals > h2,
.cart_totals > h3,
.woocommerce .cart-collaterals h1,
.woocommerce .cart-collaterals h2,
.woocommerce .cart-collaterals h3,
.woocommerce-page .cart-collaterals h1,
.woocommerce-page .cart-collaterals h2,
.woocommerce-page .cart-collaterals h3,
.cart-subtotal h1,
.cart-subtotal h2,
.cart-subtotal h3,
body.woocommerce-cart .cart-collaterals h1,
body.woocommerce-cart .cart-collaterals h2,
body.woocommerce-cart .cart-collaterals h3 {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: -9999px !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Cart page main container styling */
.woocommerce .entry-content {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* Login / coupon notice pills — match the unselected payment-method card
   vocabulary: white surface, thin neutral border, soft shadow, rounded
   1rem. Selected/active states are handled separately. */
.woocommerce .woocommerce-info,
.woocommerce .wc-block-components-notice-banner {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 1rem !important;
  padding: 1.25rem 1.5rem !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.woocommerce .woocommerce-info::before {
  display: none !important;
}

/* Info box text styling */
.woocommerce .woocommerce-info {
  color: var(--mp-primary-text) !important;
  font-family: 'Roboto', sans-serif !important;
  text-align: center !important;
}

/* Coupon notification box */
.woocommerce .wc-block-components-notice-banner {
  text-align: center !important;
  color: var(--mp-primary-text) !important;
  font-family: 'Roboto', sans-serif !important;
}

/* Product summary section */
.woocommerce .shop_table,
.woocommerce table.cart {
  background-color: var(--mp-card-bg) !important;
  border-radius: 0.5rem !important;
  box-shadow: var(--mp-shadow) !important;
  padding: 20px !important;
  margin: 20px 0 !important;
  border: none !important;
  width: 100% !important;
}

.woocommerce .shop_table thead {
  display: none !important;
}

.woocommerce .shop_table tr {
  border: none !important;
}

.woocommerce .shop_table td {
  border: none !important;
  padding: 30px 0 !important;
  vertical-align: middle !important;
  min-height: 45px !important;
}


.woocommerce .product-name {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500 !important;
  color: var(--mp-primary-text) !important;
}

.woocommerce .product-quantity,
.woocommerce .product-price,
.woocommerce .product-subtotal {
  text-align: right !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 600 !important;
}

.woocommerce .cartBlock,
.woocommerce-page .cartBlock {
  background-color: var(--mp-card-bg) !important;
  border-radius: 0.5rem !important;
  box-shadow: var(--mp-shadow) !important;
  padding: 2rem !important;
  margin: 0 0 2rem 0 !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.woocommerce .cartBlock:hover,
.woocommerce-page .cartBlock:hover {
  box-shadow: var(--mp-shadow-hover) !important;
  transform: translateY(-1px) !important;
}

.woocommerce .cartBlock .container,
.woocommerce-page .cartBlock .container {
  max-width: 1000px !important;
  margin: 0 auto !important;
}

/* WooCommerce Cart Blocks Styling */
.wp-block-woocommerce-cart,
.is-large.wc-block-cart {
  background: transparent !important;
}

.wc-block-cart-items,
.wp-block-woocommerce-cart-order-summary-block {
  background-color: var(--mp-card-bg) !important;
  border-radius: 0.5rem !important;
  box-shadow: var(--mp-shadow) !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  border: 1px solid #e9ecef !important;
}

/* Button Styling for WooCommerce */
.woocommerce .nbtn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .cartBlock button[type="submit"],
.woocommerce .add_to_cart_button {
	background: var(--mp-orange) !important;
	border-radius: 0.375rem !important;
	font-weight: 500 !important;
	font-family: 'Roboto', sans-serif !important;
}

.woocommerce .nbtn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .cartBlock button[type="submit"]:hover,
.woocommerce .add_to_cart_button:hover {
	background: #e55d00 !important;
	transform: translateY(-1px) !important;
}

/* Form Styling for WooCommerce */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce select {
    border: 1px solid #e9ecef !important;
    background: var(--mp-card-bg) !important;
    border-radius: 0.375rem !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 0.9rem !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    padding: 12px 15px !important;
    width: 100% !important;
}

/* Dropdown options styling - target both native and JavaScript dropdowns */
.woocommerce select option,
select option,
.select2-container .select2-results,
.select2-container--default .select2-results__option,
.select2-dropdown .select2-results__option,
.select2-results__option {
    font-size: 0.85rem !important;
    padding: 8px !important;
}

/* Select2 dropdown styling */
.select2-container--default .select2-results__option {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    padding: 8px 12px !important;
}

.select2-dropdown {
    font-size: 0.85rem !important;
}

.select2-results {
    font-size: 0.85rem !important;
}

.select2-results__option {
    font-size: 0.85rem !important;
    padding: 8px 12px !important;
}

/* Select2 selection (placeholder) text */
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-selection__rendered {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
}

.select2-container--default .select2-selection--single {
    font-size: 0.85rem !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce select:focus {
    border-color: var(--mp-orange) !important;
    box-shadow: 0 0 0 0.2rem rgba(251, 107, 0, 0.25) !important;
    outline: none !important;
}

/* Payment methods styling */
.woocommerce ul.payment_methods {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
    margin-bottom: 0px !important;
}

.woocommerce ul.payment_methods li {
    background: var(--mp-card-bg) !important;
    border: 1px solid #e9ecef !important;
    border-radius: 0.375rem !important;
    margin-bottom: 10px !important;
    padding: 15px !important;
    box-shadow: var(--mp-shadow) !important;
}

.woocommerce ul.payment_methods li.wc_payment_method {
    list-style: none !important;
}

.woocommerce ul.payment_methods li input[type="radio"] {
    margin-right: 10px !important;
}

.woocommerce ul.payment_methods li label {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 500 !important;
    color: var(--mp-primary-text) !important;
}

/* Payment icons styling */
.woocommerce ul.payment_methods li img {
    margin-left: 10px !important;
    vertical-align: middle !important;
}

/* Header Styling for WooCommerce */
.woocommerce .headerBlock,
.woocommerce-page .headerBlock {
	background: var(--mp-body-bg) !important;
	border-radius: 0 0 0.5rem 0.5rem !important;
	box-shadow: var(--mp-shadow) !important;
}

/* Logo Hover Effect for WooCommerce */
.woocommerce .headerBlock__logo img,
.woocommerce-page .headerBlock__logo img {
	transition: transform 0.3s ease !important;
}

.woocommerce .headerBlock__logo img:hover,
.woocommerce-page .headerBlock__logo img:hover {
	transform: scale(1.05) !important;
}


/* Message Element for WooCommerce */
.woocommerce .msgEl,
.woocommerce-page .msgEl {
    background: var(--mp-orange) !important;
    border-radius: 0.5rem !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 500 !important;
    box-shadow: var(--mp-shadow) !important;
}

/* Login Block Styling for WooCommerce */
.woocommerce .wc-block-components-notice-banner__content .mo-openid-app-icons,
.woocommerce-page .wc-block-components-notice-banner__content .mo-openid-app-icons {
    text-align: center !important;
    background: transparent !important;
    margin: 0 auto !important;
}

/* Form labels styling */
.woocommerce .form-row label {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 500 !important;
    color: var(--mp-primary-text) !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.woocommerce .form-row label .required {
    color: var(--mp-danger-red) !important;
}

/* Subscription Title for WooCommerce */
.woocommerce .subscription-title,
.woocommerce-page .subscription-title {
    margin-top: 1.5rem !important;
    font-size: 16px !important;
    color: var(--mp-primary-text) !important;
    font-weight: 600 !important;
    font-family: 'Roboto', sans-serif !important;
    margin-bottom: 15px !important;
}

/* Subscription checkboxes styling */
.woocommerce .checkboxesBlock__body {
    margin-bottom: 20px !important;
}

.woocommerce .xoo-aff-group {
    margin-bottom: 10px !important;
}

.woocommerce .xoo-aff-group label {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400 !important;
    color: var(--mp-primary-text) !important;
    margin-bottom: 0 !important;
    display: inline !important;
}

.woocommerce .xoo-aff-group input[type="checkbox"] {
    margin-right: 8px !important;
    vertical-align: middle !important;
}

/* Terms and conditions styling */
.woocommerce .woocommerce-terms-and-conditions-checkbox-text {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    color: var(--mp-primary-text) !important;
}

/* Order Summary Compact Styling for WooCommerce */
.woocommerce .woocommerce-checkout-review-order h3,
.woocommerce .checkoutBlock h3,
.woocommerce .cartBlock h3 {
    display: none !important;
}

.woocommerce .woocommerce-checkout-review-order-table .cart-subtotal,
.woocommerce .woocommerce-checkout-review-order-table tr.cart-subtotal,
.woocommerce .woocommerce-checkout-review-order-table .order-total,
.woocommerce .woocommerce-checkout-review-order-table tr.order-total {
    display: none !important;
}

.woocommerce .woocommerce-checkout-review-order-table td {
    padding: 0 !important;
    height: 30px !important;
    line-height: 1.2 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

.woocommerce .woocommerce-checkout-review-order-table td:first-child {
    text-align: left !important;
    padding-left: 20px !important;
    padding-right: 10px !important;
}

.woocommerce .woocommerce-checkout-review-order-table td:last-child {
    text-align: right !important;
    padding-right: 20px !important;
    padding-left: 10px !important;
}

.woocommerce .woocommerce-checkout-review-order-table thead {
    display: none !important;
}

.woocommerce .woocommerce-checkout-review-order-table {
    border: none !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
}

.woocommerce .woocommerce-checkout-review-order-table td,
.woocommerce .woocommerce-checkout-review-order-table th {
    border: none !important;
}

/* Desktop Payment Button for WooCommerce */
@media (min-width: 768px) {
    .woocommerce #place_order,
    .woocommerce button[id="place_order"] {
        width: 100% !important;
        padding: 15px 30px !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        margin-top: 20px;
    }

    .woocommerce .woocommerce-checkout #payment,
    .woocommerce .checkoutBlock,
    .woocommerce .cartBlock {
        text-align: center !important;
    }

    .woocommerce .woocommerce-checkout .form-row,
    .woocommerce .checkoutBlock .form-row,
    .woocommerce .cartBlock .form-row {
        text-align: left !important;
    }

    .woocommerce .woocommerce-checkout label,
    .woocommerce .checkoutBlock label,
    .woocommerce .cartBlock label {
        text-align: left !important;
    }
}

/* Fix z-index for auth modal to appear above dropdowns */
.xoo-el-container,
.xoo-el-opac,
.xoo-el-modal,
.xoo-el-wrap,
.xoo-el-main {
    z-index: 999999 !important;
}

/* Ensure dropdowns don't appear above modal */
.select2-container,
.select2-dropdown,
.select2-container--default .select2-results,
select {
    z-index: 1000 !important;
}

/* When modal is open, force dropdown z-index lower */
body.xoo-el-popup-active .select2-container,
body.xoo-el-popup-active .select2-dropdown,
body.xoo-el-popup-active select {
    z-index: 100 !important;
}

/* Style specific checkout page links with consistent text color and orange underline */
.wc-block-components-notice-banner__content a,
.woocommerce-info a,
.showlogin,
a.showlogin,
.woocommerce-terms-and-conditions-checkbox-text a,
.woocommerce .checkboxesBlock__body a,
.woocommerce .xoo-aff-group a {
    color: var(--mp-primary-text) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--mp-orange) !important;
    transition: color 0.3s ease !important;
    font-weight: normal !important;
}

.wc-block-components-notice-banner__content a:hover,
.woocommerce-info a:hover,
.showlogin:hover,
a.showlogin:hover,
.woocommerce-terms-and-conditions-checkbox-text a:hover,
.woocommerce .checkboxesBlock__body a:hover,
.woocommerce .xoo-aff-group a:hover {
    color: var(--mp-orange) !important;
}

/* Center coupon code section when visible */
.woocommerce-form-coupon:not([style*="display: none"]),
.wc-block-components-totals-coupon:not([style*="display: none"]),
.coupon:not([style*="display: none"]) {
    text-align: center !important;
}

.woocommerce-form-coupon:not([style*="display: none"]) p,
.wc-block-components-totals-coupon:not([style*="display: none"]) p,
.coupon:not([style*="display: none"]) p {
    text-align: center !important;
    margin-bottom: 10px !important;
    font-size: 0.85rem !important;
}

.woocommerce-form-coupon:not([style*="display: none"]) .form-row,
.wc-block-components-totals-coupon:not([style*="display: none"]) .form-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Don't override display property for coupon forms */
.woocommerce-form-coupon[style*="display: none"],
.wc-block-components-totals-coupon[style*="display: none"],
.coupon[style*="display: none"] {
    display: none !important;
}

/* Enhanced WooCommerce Cart Blocks Styling */
.wc-block-cart-items__header,
.wc-block-cart-items .wc-block-cart-item {
  border-bottom: 1px solid #e9ecef !important;
}

.wc-block-cart-items .wc-block-cart-item:last-child {
  border-bottom: none !important;
}

/* Cart Item Product Names */
.wc-block-cart-item__product .wc-block-components-product-name {
  color: var(--mp-primary-text) !important;
  font-weight: 500 !important;
  font-size: 1.1rem !important;
}

/* Cart Item Prices */
.wc-block-cart-item__total .wc-block-formatted-money-amount,
.wc-block-components-totals-item .wc-block-formatted-money-amount {
  color: var(--mp-primary-text) !important;
  font-weight: 600 !important;
}

/* Cart Totals */
.wp-block-woocommerce-cart-order-summary-totals-block {
  background-color: #f8f9fa !important;
  border-radius: 0.375rem !important;
  padding: 1rem !important;
  margin: 1rem 0 !important;
}

/* Quantity Controls */
.wc-block-components-quantity-selector {
  border: 1px solid #e9ecef !important;
  border-radius: 0.375rem !important;
  background-color: var(--mp-card-bg) !important;
}

.wc-block-components-quantity-selector input {
  border: none !important;
  background: transparent !important;
  text-align: center !important;
  font-weight: 500 !important;
}

.wc-block-components-quantity-selector button {
  background-color: var(--mp-orange) !important;
  color: white !important;
  border: none !important;
  border-radius: 0.25rem !important;
  transition: background-color 0.3s ease !important;
}

.wc-block-components-quantity-selector button:hover {
  background-color: #e55d00 !important;
}

/* Remove Item Button */
.wc-block-cart-item__remove-link {
  color: var(--mp-danger-red) !important;
  transition: color 0.3s ease !important;
}

.wc-block-cart-item__remove-link:hover {
  color: #c82333 !important;
}

/* Checkout Button */
.wc-block-cart__submit-container .wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button {
  background-color: var(--mp-primary-blue) !important;
  color: white !important;
  border: none !important;
  border-radius: 0.375rem !important;
  padding: 1rem 2rem !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  transition: background-color 0.3s ease, transform 0.3s ease !important;
  width: 100% !important;
}

.wc-block-cart__submit-container .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button:hover {
  background-color: var(--mp-success-green) !important;
  transform: translateY(-1px) !important;
}

/* Empty Cart Styling */
.wp-block-woocommerce-empty-cart-block {
  background-color: var(--mp-card-bg) !important;
  border-radius: 0.5rem !important;
  box-shadow: var(--mp-shadow) !important;
  padding: 3rem !important;
  text-align: center !important;
  margin: 2rem 0 !important;
}

.wp-block-woocommerce-empty-cart-block h2 {
  color: var(--mp-secondary-text) !important;
  font-size: 1.5rem !important;
  margin-bottom: 1rem !important;
}

/* Continue Shopping Button */
.wc-block-cart__empty-cart-wrapper .wp-block-button__link {
  background-color: var(--mp-orange) !important;
  color: white !important;
  border-radius: 0.375rem !important;
  padding: 0.75rem 1.5rem !important;
  text-decoration: none !important;
  transition: background-color 0.3s ease !important;
}

.wc-block-cart__empty-cart-wrapper .wp-block-button__link:hover {
  background-color: #e55d00 !important;
}

/* Cross-sells Styling */
.wp-block-woocommerce-cart-cross-sells-block {
  background-color: var(--mp-card-bg) !important;
  border-radius: 0.5rem !important;
  box-shadow: var(--mp-shadow) !important;
  padding: 1.5rem !important;
  margin-top: 2rem !important;
}

.wp-block-woocommerce-cart-cross-sells-block h2 {
  color: var(--mp-primary-text) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  margin-bottom: 1rem !important;
}

/* Mobile Responsive */
@media (max-width: 767.98px) {
  .page-cart h1 {
    font-size: 2rem !important;
  }

  .woocommerce .cartBlock,
  .woocommerce-page .cartBlock {
    margin: 1rem 0 !important;
    padding: 1rem !important;
  }

  .woocommerce .cartBlock .container,
  .woocommerce-page .cartBlock .container {
    margin: 0 10px !important;
  }

  .wc-block-cart-items,
  .wp-block-woocommerce-cart-order-summary-block {
    padding: 1rem !important;
  }

  /* Truncate product name on mobile with word wrap */
  .woocommerce .product-name {
    font-size: 14px !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-wrap: break-word !important;
    max-height: 2.6em !important;
  }
}

/* ==========================================================================
   Shop / Category archive — editorial header + toolbar
   Centred archive title, then a thin meta-strip with the result count on
   the left and sorting on the right, framed by hairline rules.
   ========================================================================== */

.woocommerce-products-header {
	text-align: center;
	margin: 2.5rem auto 1.5rem;
	padding: 0 1rem;
	max-width: 56rem;
}

.woocommerce-products-header__title.page-title {
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	font-weight: 700;
	color: #1f1f1f;
	letter-spacing: -0.01em;
	margin: 0;
	line-height: 1.15;
}

.term-description {
	max-width: 44rem;
	margin: 0.75rem auto 0;
	font-size: 1rem;
	line-height: 1.55;
	color: #555;
	text-align: center;
}

/* Toolbar + product grid aligned via shared CSS Grid layout.
   Force the .woocommerce wrapper itself to be a 1-column grid so toolbar
   and <ul.products> are both grid items with identical horizontal extent. */
.woocommerce,
.woocommerce-page .woocommerce {
	display: block;
}

.woocommerce .m2p-shop-toolbar,
.woocommerce-page .m2p-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	box-sizing: border-box;
	margin: 0 0 1.75rem;
	padding: 0.875rem 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	clear: both;
}

/* Match the toolbar's outer edges to the product grid by giving both the
   same explicit horizontal box. Use Woo's standard 4-column math: 4 cards
   at 22.05% with 3 gutters of 3.8% sum to 99.6% of the parent. We constrain
   the toolbar to that same effective width. */
.woocommerce .m2p-shop-toolbar {
	width: 99.6%;
	max-width: 99.6%;
}

@supports (display: grid) {
	.woocommerce ul.products.columns-4 {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 1.5rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.woocommerce ul.products.columns-4 li.product {
		width: auto !important;
		margin: 0 !important;
		float: none !important;
	}
	/* When the grid is in use, the toolbar can also be 100% — both share the
	   same parent and the same edges. */
	.woocommerce .m2p-shop-toolbar {
		width: 100%;
		max-width: 100%;
	}
}

.woocommerce .m2p-shop-toolbar .woocommerce-result-count,
.woocommerce .m2p-shop-toolbar .woocommerce-ordering {
	float: none;
	margin: 0;
	padding: 0;
}

.woocommerce .m2p-shop-toolbar .woocommerce-result-count {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #7a7a7a;
}

.woocommerce .m2p-shop-toolbar .woocommerce-ordering select.orderby {
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: 0.5rem;
	background: #fff;
	padding: 0.55rem 2.25rem 0.55rem 0.875rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #1f1f1f;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23fb6b00' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.875rem center;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

.woocommerce .m2p-shop-toolbar .woocommerce-ordering select.orderby:hover {
	border-color: rgba(251, 107, 0, 0.5);
}

.woocommerce .m2p-shop-toolbar .woocommerce-ordering select.orderby:focus {
	outline: none;
	border-color: #fb6b00;
	box-shadow: 0 0 0 3px rgba(251, 107, 0, 0.15);
}

@media screen and (max-width: 560px) {
	.woocommerce .m2p-shop-toolbar,
	.woocommerce-page .m2p-shop-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 0.625rem;
		padding: 0.75rem 0;
	}
}

/* ==========================================================================
   Shop archive — editorial card grid
   --------------------------------------------------------------------------
   Visual continuation of the single-product / diploma-detail / alumni-list
   redesign. Applies to /shop/ and any product taxonomy archive.

   Vocabulary inherited (do not invent new tokens):
     • Page background: linear-gradient(180deg, #FFFFFF 0%, #FFECD2 100%)
       fixed to viewport — same as body:has(.kadence-single-post) and
       body.page-alumni-list.
     • Card surface: #ffffff, border-radius 1rem,
       shadow 0 4px 24px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04).
     • Brand orange: #fb6b00 (highlight); #c85600 / #E65C00 alt for AA on white.
     • Stock chip: rgba(251,107,0,0.08) peach mat, label in #fb6b00,
       count in #1A202C — mirror of .product-buy-card__stock.

   The user's explicit constraint: NO left/right page margins. The grid
   spans the full available container width (already capped by
   .woocommerce-shop .container { max-width: 1060px } in styles.css).

   We need !important on many rules because styles.css already declares
   .woocommerce ul.products li.product with !important borders, background,
   and padding (legacy theme rules). Specificity alone won't beat them.
   ========================================================================== */

/* Editorial gradient backdrop on the shop + product archive bodies. We use
   :is() to cover the shop landing page and category/tag archives in a single
   selector. background-attachment: fixed so the peach end colour anchors to
   the viewport — no white slack between long grids and the footer. */
body.woocommerce-shop,
body.woocommerce.archive,
body.tax-product_cat,
body.tax-product_tag {
	background: linear-gradient(180deg, #FFFFFF 0%, #FFECD2 100%) !important;
	background-attachment: fixed !important;
}

/* Restore Roboto override that the global .woocommerce body rule above tries
   to set — we want the body itself transparent so the gradient shows through. */
body.woocommerce-shop,
body.woocommerce.archive {
	background-color: transparent !important;
}

/* -------- A) Archive header — left-aligned editorial H1 with accent rule.
   Overrides the centred .woocommerce-products-header rule above so the shop
   landing page picks up the same H1 vocabulary as the diploma detail page
   (32px / 700 / line-height 1.5 / #1A202C / letter-spacing -0.005em) with a
   small orange accent rule below it.                                       */

body.woocommerce-shop .woocommerce-products-header,
body.woocommerce.archive .woocommerce-products-header {
	text-align: left;
	max-width: none;
	margin: 1.5rem 0 1.75rem;
	padding: 0;
}

body.woocommerce-shop .woocommerce-products-header__title.page-title,
body.woocommerce.archive .woocommerce-products-header__title.page-title {
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.005em;
	color: #1A202C;
	margin: 0 0 0.625rem;
	text-align: left;
	position: relative;
}

/* Orange accent rule below the title — same vocabulary as the alumni-list
   page wraps and the product-buy-card__inner left edge. */
body.woocommerce-shop .woocommerce-products-header__title.page-title::after,
body.woocommerce.archive .woocommerce-products-header__title.page-title::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	background: #fb6b00;
	border-radius: 2px;
	margin-top: 0.875rem;
}

body.woocommerce-shop .term-description,
body.woocommerce.archive .term-description {
	max-width: 44rem;
	margin: 0.5rem 0 0;
	text-align: left;
	color: #4A5568;
}

/* -------- B) Toolbar — light de-emphasis on the surrounding rules so the
   bar feels integrated with the gradient backdrop, not floating on grey. */
body.woocommerce-shop .m2p-shop-toolbar,
body.woocommerce.archive .m2p-shop-toolbar {
	border-top-color: rgba(0, 0, 0, 0.08);
	border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* -------- C) Product card grid.
   The legacy 4-col grid in shop-styles is preserved; here we re-tune gap and
   responsive cols specifically for the shop archive. We don't rely on the
   .columns-4 hook because category archives may use other column counts —
   instead we re-declare the grid for any product loop on these pages.    */

body.woocommerce-shop .woocommerce ul.products,
body.woocommerce.archive .woocommerce ul.products,
body.woocommerce-shop ul.products,
body.woocommerce.archive ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

/* Stay at 3 columns on wide viewports — keeps each card's content readable
   and doesn't force a 4-up density that crowds product titles. */

@media (max-width: 768px) {
	body.woocommerce-shop .woocommerce ul.products,
	body.woocommerce.archive .woocommerce ul.products,
	body.woocommerce-shop ul.products,
	body.woocommerce.archive ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
}

@media (max-width: 480px) {
	body.woocommerce-shop .woocommerce ul.products,
	body.woocommerce.archive .woocommerce ul.products,
	body.woocommerce-shop ul.products,
	body.woocommerce.archive ul.products {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}

/* -------- D) Card surface — white, rounded, soft layered shadow.
   The legacy styles.css rule applies grey 1px borders + 15px radius with
   !important. We override with the editorial vocabulary.

   Padding 1.25rem gives the title/price/stock/CTA stack visible breathing
   room without crowding the thumbnail. Using flex column lets us align the
   CTA flush to the bottom (so cards with shorter titles don't have a
   floating button). */
body.woocommerce-shop .woocommerce ul.products li.product,
body.woocommerce.archive .woocommerce ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 1.25rem !important;
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.04) !important;
	border-radius: 1rem !important;
	box-shadow:
		0 4px 24px rgba(0, 0, 0, 0.06),
		0 1px 3px rgba(0, 0, 0, 0.04) !important;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	text-align: left;
	transition:
		transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
		border-color 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
	position: relative;
}

/* Hover lift — subtle translateY + a slightly stronger shadow + a faint peach
   border accent. Same easing as the buy-card CTA. */
body.woocommerce-shop .woocommerce ul.products li.product:hover,
body.woocommerce.archive .woocommerce ul.products li.product:hover,
body.woocommerce-shop .woocommerce ul.products li.product:focus-within,
body.woocommerce.archive .woocommerce ul.products li.product:focus-within {
	transform: translateY(-2px);
	box-shadow:
		0 12px 32px rgba(0, 0, 0, 0.08),
		0 2px 6px rgba(0, 0, 0, 0.05) !important;
	border-color: rgba(251, 107, 0, 0.18) !important;
}

@media (prefers-reduced-motion: reduce) {
	body.woocommerce-shop .woocommerce ul.products li.product,
	body.woocommerce.archive .woocommerce ul.products li.product {
		transition: none;
	}
	body.woocommerce-shop .woocommerce ul.products li.product:hover,
	body.woocommerce.archive .woocommerce ul.products li.product:hover {
		transform: none;
	}
}

/* -------- E) Card link wrapper — kill the legacy text-align:center and
   flex direction inherited from styles.css, then re-establish the upper
   stack (image → title → price). */
body.woocommerce-shop .woocommerce ul.products li.product a.woocommerce-loop-product__link,
body.woocommerce.archive .woocommerce ul.products li.product a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	height: auto;
	flex: 0 0 auto;
	text-decoration: none;
	color: inherit;
}

/* -------- F) Card image — uniform aspect ratio so the grid is even
   regardless of how each product was photographed/uploaded. The thumbnails
   are mostly square ticket cards but a few illustrated lessons are wider —
   contain (not cover) preserves them without cropping. */
body.woocommerce-shop .woocommerce ul.products li.product img,
body.woocommerce.archive .woocommerce ul.products li.product img,
body.woocommerce-shop .woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
body.woocommerce.archive .woocommerce ul.products li.product .attachment-woocommerce_thumbnail {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	max-height: none;
	object-fit: contain;
	margin: 0 !important;
	border-radius: 0.625rem;
	background: #FFF5EB; /* peach mat behind any letterboxed thumbnails */
}

/* -------- G) Card title — editorial type, left-aligned, swap to brand
   orange on hover/focus of the card link. */
body.woocommerce-shop .woocommerce ul.products li.product .woocommerce-loop-product__title,
body.woocommerce.archive .woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.005em;
	color: #1A202C;
	margin: 0 !important;
	padding: 0;
	text-align: left;
	transition: color 180ms ease;
}

body.woocommerce-shop .woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
body.woocommerce.archive .woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
body.woocommerce-shop .woocommerce ul.products li.product a.woocommerce-loop-product__link:focus-visible .woocommerce-loop-product__title,
body.woocommerce.archive .woocommerce ul.products li.product a.woocommerce-loop-product__link:focus-visible .woocommerce-loop-product__title {
	color: #fb6b00;
}

/* -------- H) Card price — bold, dark, prominent. Sale price uses the
   AA-compliant orange (#E65C00 = 4.6:1 on white, same as the buy card). */
body.woocommerce-shop .woocommerce ul.products li.product .price,
body.woocommerce.archive .woocommerce ul.products li.product .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0 !important;
	font-size: 1.125rem;
	font-weight: 700;
	color: #1A202C;
	letter-spacing: -0.01em;
	line-height: 1.2;
	text-align: left;
}

body.woocommerce-shop .woocommerce ul.products li.product .price .woocommerce-Price-amount,
body.woocommerce.archive .woocommerce ul.products li.product .price .woocommerce-Price-amount {
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	color: #1A202C !important;
}

body.woocommerce-shop .woocommerce ul.products li.product .price ins,
body.woocommerce.archive .woocommerce ul.products li.product .price ins {
	background: transparent;
	text-decoration: none;
}

body.woocommerce-shop .woocommerce ul.products li.product .price ins .woocommerce-Price-amount,
body.woocommerce.archive .woocommerce ul.products li.product .price ins .woocommerce-Price-amount {
	color: #E65C00 !important;
}

body.woocommerce-shop .woocommerce ul.products li.product .price del,
body.woocommerce.archive .woocommerce ul.products li.product .price del {
	color: #4A5568;
	opacity: 0.6;
	font-weight: 500;
	font-size: 0.9375rem;
}

body.woocommerce-shop .woocommerce ul.products li.product .price del .woocommerce-Price-amount,
body.woocommerce.archive .woocommerce ul.products li.product .price del .woocommerce-Price-amount {
	font-size: 0.9375rem !important;
	font-weight: 500 !important;
	color: #4A5568 !important;
}

/* -------- I) Stock chip — peach-tinted pill with small-caps orange label
   and bold dark count. Same vocabulary as .product-buy-card__stock on the
   single product page. The new markup (functions.php show_stock) emits:
     <div class="stock m2p-loop-stock">
       <span class="meta-label">Осталось:</span> <strong>475</strong>
     </div>                                                                */
/* Make the product-link wrapper itself a flex column so the stock chip
   inside it can pin to the bottom of the visible content area. Combined
   with flex:1 on the link, the link fills the card vertically and the
   chip's margin-top: auto pushes it to the bottom of the link. */
body.woocommerce-shop .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link,
body.woocommerce.archive .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	gap: 0.5rem !important;
	color: inherit;
	text-decoration: none;
}

body.woocommerce-shop .woocommerce ul.products li.product .stock,
body.woocommerce.archive .woocommerce ul.products li.product .stock,
.woocommerce ul.products li.product .m2p-loop-stock {
	display: inline-flex !important;
	align-self: flex-start !important; /* hug content; don't span the whole row */
	align-items: baseline;
	gap: 0.4rem !important;
	/* margin-top: auto pushes the chip to the bottom of its flex parent.
	   When the chip is inside the product-link wrapper (Woo default markup),
	   the link is now a flex column with flex:1, so the chip pins to its
	   bottom. When the chip is a direct child of <li> (priority 7 hook),
	   the same rule pins it to the bottom of the card. Either way works. */
	margin-top: auto !important;
	margin-bottom: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0.25rem 0.625rem;
	background: rgba(251, 107, 0, 0.08);
	border-radius: 0.375rem;
	color: #fb6b00;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
	white-space: nowrap;
}

body.woocommerce-shop .woocommerce ul.products li.product .stock .meta-label,
body.woocommerce.archive .woocommerce ul.products li.product .stock .meta-label,
.woocommerce ul.products li.product .m2p-loop-stock .meta-label {
	color: #fb6b00;
}

body.woocommerce-shop .woocommerce ul.products li.product .stock strong,
body.woocommerce.archive .woocommerce ul.products li.product .stock strong,
.woocommerce ul.products li.product .m2p-loop-stock strong {
	color: #1A202C;
	font-weight: 700;
	letter-spacing: 0;
	font-size: 0.8125rem;
}

/* When a stock chip is present, the chip claims the auto-margin slack and
   pins itself to the bottom of the card. The Buy button immediately follows
   it with a small gap. Selector matches/exceeds the specificity of the
   shop-archive button rule (body.woocommerce-shop .woocommerce ul.products
   li.product .add_to_cart_button) so its margin-top auto is overridden. */
body.woocommerce-shop .woocommerce ul.products li.product .stock + .add_to_cart_button,
body.woocommerce.archive .woocommerce ul.products li.product .stock + .add_to_cart_button,
body.woocommerce-shop .woocommerce ul.products li.product .stock + .button,
body.woocommerce.archive .woocommerce ul.products li.product .stock + .button,
body.woocommerce-shop .woocommerce ul.products li.product .m2p-loop-stock + .add_to_cart_button,
body.woocommerce.archive .woocommerce ul.products li.product .m2p-loop-stock + .add_to_cart_button {
	margin-top: 0.625rem !important;
	margin-bottom: 0 !important;
}

/* -------- J) "Купить" / "Buy" CTA — editorial primary button. The visible
   label is injected via .add_to_cart_button:before content (see styles.css
   .add_to_cart_button { font-size:0 } and the wp_print_footer_scripts hook
   in functions.php). We restyle the button container only. */
body.woocommerce-shop .woocommerce ul.products li.product .button,
body.woocommerce.archive .woocommerce ul.products li.product .button,
body.woocommerce-shop .woocommerce ul.products li.product .add_to_cart_button,
body.woocommerce.archive .woocommerce ul.products li.product .add_to_cart_button,
body.woocommerce-shop .wc-block-grid__product .add_to_cart_button,
body.woocommerce.archive .wc-block-grid__product .add_to_cart_button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 2.75rem;
	margin: auto 0 0 !important; /* push to the bottom of the flex column */
	padding: 0.75rem 1.25rem !important;
	background: #fb6b00 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 0.5rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(251, 107, 0, 0.22);
	box-sizing: border-box !important;
	position: static !important; /* override legacy .wc-block-grid__product .add_to_cart_button { position: absolute } */
	bottom: auto !important;
	transition:
		background-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
		transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Override legacy .wc-block-grid__product { padding-bottom: 95px } that
   reserves space for the absolutely-positioned button — we render the button
   inline so this padding leaves a visible gap below. */
body.woocommerce-shop .wc-block-grid__product,
body.woocommerce.archive .wc-block-grid__product {
	padding-bottom: 1.25rem !important;
	position: relative !important;
}

body.woocommerce-shop .woocommerce ul.products li.product .button:hover,
body.woocommerce.archive .woocommerce ul.products li.product .button:hover,
body.woocommerce-shop .woocommerce ul.products li.product .add_to_cart_button:hover,
body.woocommerce.archive .woocommerce ul.products li.product .add_to_cart_button:hover {
	background: #c85600 !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(251, 107, 0, 0.32);
}

body.woocommerce-shop .woocommerce ul.products li.product .button:focus-visible,
body.woocommerce.archive .woocommerce ul.products li.product .button:focus-visible,
body.woocommerce-shop .woocommerce ul.products li.product .add_to_cart_button:focus-visible,
body.woocommerce.archive .woocommerce ul.products li.product .add_to_cart_button:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 3px #ffffff,
		0 0 0 6px #fb6b00,
		0 6px 20px rgba(251, 107, 0, 0.32);
}

/* The "Loading…" / "View cart" / "Added" states the legacy theme used —
   keep the editorial fill so the button never reverts to the default Woo
   teal hover.                                                             */
body.woocommerce-shop .woocommerce ul.products li.product .add_to_cart_button.loading,
body.woocommerce.archive .woocommerce ul.products li.product .add_to_cart_button.loading,
body.woocommerce-shop .woocommerce ul.products li.product .add_to_cart_button.added,
body.woocommerce.archive .woocommerce ul.products li.product .add_to_cart_button.added {
	background: #c85600 !important;
}

/* -------- K) Pagination — match the editorial primary CTA vocabulary. */
body.woocommerce-shop .woocommerce-pagination,
body.woocommerce.archive .woocommerce-pagination {
	margin: 1.5rem 0 3rem;
	text-align: left;
}

body.woocommerce-shop .woocommerce-pagination ul.page-numbers,
body.woocommerce.archive .woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	gap: 0.375rem;
	border: none !important;
	padding: 0;
	margin: 0;
}

body.woocommerce-shop .woocommerce-pagination ul.page-numbers li,
body.woocommerce.archive .woocommerce-pagination ul.page-numbers li {
	border: none !important;
	margin: 0;
}

body.woocommerce-shop .woocommerce-pagination ul.page-numbers li .page-numbers,
body.woocommerce.archive .woocommerce-pagination ul.page-numbers li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.625rem;
	border-radius: 0.5rem;
	background: #ffffff;
	color: #1A202C;
	font-weight: 600;
	font-size: 0.875rem;
	border: 1px solid rgba(0, 0, 0, 0.08);
	transition:
		background-color 160ms ease,
		color 160ms ease,
		border-color 160ms ease;
}

body.woocommerce-shop .woocommerce-pagination ul.page-numbers li .page-numbers:hover,
body.woocommerce.archive .woocommerce-pagination ul.page-numbers li .page-numbers:hover {
	background: #FFF5EB;
	border-color: rgba(251, 107, 0, 0.4);
	color: #c85600;
}

body.woocommerce-shop .woocommerce-pagination ul.page-numbers li .page-numbers.current,
body.woocommerce.archive .woocommerce-pagination ul.page-numbers li .page-numbers.current {
	background: #fb6b00;
	color: #ffffff;
	border-color: #fb6b00;
}

/* -------- L) Mobile — tighten card padding so the grid stays premium at
   small sizes without cards dominating the viewport. */
@media (max-width: 480px) {
	body.woocommerce-shop .woocommerce ul.products li.product,
	body.woocommerce.archive .woocommerce ul.products li.product {
		padding: 1rem !important;
		gap: 0.75rem;
	}
	body.woocommerce-shop .woocommerce ul.products li.product .woocommerce-loop-product__title,
	body.woocommerce.archive .woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.9375rem;
	}
	body.woocommerce-shop .woocommerce-products-header__title.page-title,
	body.woocommerce.archive .woocommerce-products-header__title.page-title {
		font-size: 1.625rem;
	}
}

/* ==========================================================================
   Checkout — editorial card unification
   --------------------------------------------------------------------------
   Brings the /checkout/ and /cart/ pages onto the same editorial vocabulary
   used across single-post / single-product / shop-archive:
     • White → peach gradient backdrop (fixed to the viewport).
     • White cards, 1rem radius, layered soft shadow
       (0 4px 24px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04)).
     • Inputs/selects: white surface, 1px border rgba(0,0,0,0.12),
       0.5rem radius, orange focus ring rgba(251,107,0,0.18).
     • Primary CTA: brand orange #fb6b00 fill, white text, 0.5rem radius,
       soft orange shadow.
     • Selected payment method: 3px brand-orange left-edge accent rule
       and a peach #FFF5EB tint — same vocabulary as
       .product-buy-card__inner::before on the single-product page.

   Why both ::before pseudo-orange-rule AND peach tint? The buy-card on the
   single-product page uses the orange rule alone because the card is on a
   peach surface. Here the cards sit on white, so the rule alone is too
   timid to indicate selection — pairing it with the peach tint gives
   unambiguous "this is selected" feedback while keeping the rhyme.

   Legacy rules being overridden (don't remove them — other pages depend):
     - styles.css line 484: .woocommerce-checkout-payment { background:#fafafa }
     - styles.css line 491: .woocommerce-checkout #payment div.payment_box {background:#fff}
     - styles.css line 552: .checkoutBlock { background:#fafafa; border-radius:10px }
     - styles.css line 928-929: .woocommerce-order-pay .wc_payment_methods/form-row { background:#FAFAFA }
     - shop-styles.css line 22-28: global .woocommerce body { background-color:#f8f9fa }
     - shop-styles.css line 337-344: .payment_methods li flat 0.375rem radius

   We use !important on everything that fights styles.css since that file
   already has !important on its own rules.
   ========================================================================== */

/* -------- A) Page backdrop — white→peach gradient, fixed to viewport. */
body.woocommerce-checkout,
body.woocommerce-cart {
	background: linear-gradient(180deg, #FFFFFF 0%, #FFECD2 100%) !important;
	background-attachment: fixed !important;
	background-color: transparent !important;
}

/* The .woocommerce body { background-color: #f8f9fa } global rule near the
   top of this file targets the body inside .woocommerce; on checkout pages
   we want the gradient to show through, so neutralise the body bg. */
body.woocommerce-checkout.woocommerce,
body.woocommerce-checkout.woocommerce-page,
body.woocommerce-cart.woocommerce,
body.woocommerce-cart.woocommerce-page {
	background-color: transparent !important;
}

/* -------- B) Outer page wrapper — drop the legacy grey card surface.
   page-checkout.php emits <div class="cartBlock checkoutBlock"><div class="container">.
   The legacy .checkoutBlock rule paints it #fafafa with a 10px radius; we
   want the outer wrapper to be transparent so each interior block can be
   its own editorial card sitting directly on the gradient.               */
body.woocommerce-checkout .checkoutBlock,
body.woocommerce-checkout .cartBlock.checkoutBlock {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	max-width: 900px !important;
	margin: 0 auto 2.5rem !important;
}

body.woocommerce-checkout .checkoutBlock:hover,
body.woocommerce-checkout .cartBlock.checkoutBlock:hover {
	transform: none !important;
	box-shadow: none !important;
}

/* The page H1 ("Checkout") sits above the wrapper. Match the editorial H1
   vocabulary used on shop archive (32px / 700 / left-aligned / orange rule). */
body.woocommerce-checkout .main-inner > .container > h1 {
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.005em !important;
	color: #1A202C !important;
	margin: 1.75rem 0 1.25rem !important;
	text-align: left !important;
	border-bottom: none !important;
	padding-bottom: 0 !important;
	position: relative;
}

body.woocommerce-checkout .main-inner > .container > h1::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	background: #fb6b00;
	border-radius: 2px;
	margin-top: 0.875rem;
}

/* -------- C) Shared card surface — applied to:
     • Billing details form block
     • Order line item table (.shop_table.woocommerce-checkout-review-order-table)
     • Payment block (.woocommerce-checkout-payment)
     • Block-based checkout sections (.wp-block-woocommerce-checkout-* blocks)
   Each gets the same vocabulary so the page reads as a stack of cards. */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-checkout-payment,
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout .wp-block-woocommerce-checkout-fields-block,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block,
body.woocommerce-checkout .wp-block-woocommerce-checkout-payment-block,
body.woocommerce-checkout .wp-block-woocommerce-checkout-billing-address-block {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.04) !important;
	border-radius: 1rem !important;
	box-shadow:
		0 4px 24px rgba(0, 0, 0, 0.06),
		0 1px 3px rgba(0, 0, 0, 0.04) !important;
	padding: 2rem !important;
	margin: 0 0 1.5rem 0 !important;
}

/* The order-review block contains the line-item table; we want the wrapper
   itself to be the card, but the inner <table> shouldn't double-paint. */
body.woocommerce-checkout .woocommerce-checkout-review-order .shop_table,
body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Section headings inside billing/order/payment cards — editorial weight,
   subtle hairline rule below for visual separation from form rows. */
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-checkout-review-order h3,
body.woocommerce-checkout .woocommerce-checkout-payment h3 {
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.005em !important;
	color: #1A202C !important;
	margin: 0 0 1.25rem !important;
	padding-bottom: 0.875rem !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
	text-align: left !important;
	display: block !important;
}

/* Restore visibility of the "Billing details" h3 since the legacy rule above
   forces display:none on .checkoutBlock h3. The cart-collaterals rule in this
   file (lines 81–124) is scoped to .cart-collaterals so it doesn't catch
   billing/payment headings, but a separate rule (line 458–462) hides
   .checkoutBlock h3 — undo that on checkout. */
body.woocommerce-checkout .checkoutBlock .woocommerce-billing-fields h3,
body.woocommerce-checkout .checkoutBlock .woocommerce-checkout-payment h3 {
	display: block !important;
}

/* -------- D) Order line item — promote the line-item rows to read as a
   refined ledger inside the order-review card. Each row gets generous
   padding and a hairline rule between items. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item td {
	padding: 1rem 0 !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	height: auto !important;
	line-height: 1.4 !important;
	color: #1A202C !important;
	vertical-align: middle !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item:last-child td {
	border-bottom: none !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item td:first-child {
	padding-left: 0 !important;
	text-align: left !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item td:last-child {
	padding-right: 0 !important;
	text-align: right !important;
	font-weight: 700 !important;
	letter-spacing: -0.005em !important;
}

/* -------- E) Form fields — match the comment-form vocabulary in single-post.css.
   White surface, 1px border rgba(0,0,0,0.12), 0.5rem radius, orange focus
   ring rgba(251,107,0,0.18). Override the existing rule at lines 264–326
   that uses #e9ecef + 0.375rem radius + 0.2rem ring. */
body.woocommerce-checkout form .form-row input.input-text,
body.woocommerce-checkout form .form-row textarea,
body.woocommerce-checkout form .form-row select,
body.woocommerce-checkout .woocommerce-billing-fields input.input-text,
body.woocommerce-checkout .woocommerce-billing-fields textarea,
body.woocommerce-checkout .woocommerce-billing-fields select,
body.woocommerce-checkout .woocommerce-checkout-payment input[type="text"],
body.woocommerce-checkout .woocommerce-checkout-payment input[type="email"],
body.woocommerce-checkout .woocommerce-checkout-payment input[type="tel"] {
	width: 100% !important;
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 0.5rem !important;
	padding: 0.75rem 0.875rem !important;
	font-family: 'Roboto', sans-serif !important;
	font-size: 0.9375rem !important;
	color: #1A202C !important;
	line-height: 1.5 !important;
	transition:
		border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
		background-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

body.woocommerce-checkout form .form-row input.input-text:hover,
body.woocommerce-checkout form .form-row textarea:hover,
body.woocommerce-checkout form .form-row select:hover {
	border-color: rgba(0, 0, 0, 0.24) !important;
}

body.woocommerce-checkout form .form-row input.input-text:focus,
body.woocommerce-checkout form .form-row input.input-text:focus-visible,
body.woocommerce-checkout form .form-row textarea:focus,
body.woocommerce-checkout form .form-row textarea:focus-visible,
body.woocommerce-checkout form .form-row select:focus,
body.woocommerce-checkout form .form-row select:focus-visible {
	outline: none !important;
	border-color: #fb6b00 !important;
	box-shadow: 0 0 0 3px rgba(251, 107, 0, 0.18) !important;
	background: #FFF5EB !important;
}

/* Form-row labels — small-caps editorial eyebrows. */
body.woocommerce-checkout .woocommerce-billing-fields .form-row > label,
body.woocommerce-checkout .woocommerce-checkout-payment .form-row > label {
	display: block !important;
	font-size: 0.6875rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: #4A5568 !important;
	margin-bottom: 0.5rem !important;
}

body.woocommerce-checkout .form-row label .required {
	color: #fb6b00 !important;
	text-decoration: none !important;
	margin-left: 0.125rem !important;
}

/* Select2 (country dropdown) — match the field treatment. */
body.woocommerce-checkout .select2-container--default .select2-selection--single {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 0.5rem !important;
	height: auto !important;
	min-height: 2.875rem !important;
	padding: 0.5rem 0.875rem !important;
	transition:
		border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

body.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single,
body.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single {
	border-color: #fb6b00 !important;
	box-shadow: 0 0 0 3px rgba(251, 107, 0, 0.18) !important;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.5 !important;
	padding: 0 !important;
	color: #1A202C !important;
	font-size: 0.9375rem !important;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100% !important;
	top: 0 !important;
	right: 0.625rem !important;
}

/* -------- F) Payment methods — the most visible part of the unification.
   Each <li.wc_payment_method> becomes its own elevated card. Override the
   existing rule at lines 337–344 that paints them flat. */
body.woocommerce-checkout .woocommerce-checkout-payment {
	/* The container: card surface inherited from rule (C) above. */
}

/* Override legacy styles.css rule that paints .woocommerce-checkout-payment
   with #fafafa background. Already covered by (C) but re-asserted here so
   the cascade ordering works on the .woocommerce.woocommerce-checkout
   selector chain. */
body.woocommerce-checkout .woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-checkout-payment.woocommerce-checkout-payment {
	background: #ffffff !important;
}

body.woocommerce-checkout .woocommerce-checkout #payment ul.payment_methods,
body.woocommerce-checkout ul.payment_methods {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 0 1.5rem !important;
	list-style: none !important;
}

body.woocommerce-checkout ul.payment_methods li.wc_payment_method,
body.woocommerce-checkout ul.payment_methods li {
	position: relative !important;
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.06) !important;
	border-radius: 0.875rem !important;
	box-shadow:
		0 4px 24px rgba(0, 0, 0, 0.06),
		0 1px 3px rgba(0, 0, 0, 0.04) !important;
	padding: 1.25rem 1.5rem !important;
	margin: 0 0 1rem !important;
	list-style: none !important;
	overflow: hidden !important;
	transition:
		background-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
		border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

body.woocommerce-checkout ul.payment_methods li:last-child {
	margin-bottom: 0 !important;
}

body.woocommerce-checkout ul.payment_methods li:hover {
	border-color: rgba(251, 107, 0, 0.24) !important;
}

/* Selected state — peach mat surface + 3px brand-orange left-edge rule.
   Mirrors .product-buy-card__inner::before vocabulary on the buy card. */
body.woocommerce-checkout ul.payment_methods li:has(input[type="radio"]:checked) {
	background: #FFF5EB !important;
	border-color: rgba(251, 107, 0, 0.32) !important;
	box-shadow:
		0 4px 24px rgba(251, 107, 0, 0.10),
		0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

body.woocommerce-checkout ul.payment_methods li:has(input[type="radio"]:checked)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1rem;
	bottom: 1rem;
	width: 3px;
	background: #fb6b00;
	border-radius: 0 2px 2px 0;
}

/* Custom radio control — replaces the native radio with a styled circle so
   the checked state is reliably orange ring + white center dot across
   browsers (the native `accent-color` paints the inner dot using the
   browser's default contrast color, which is black on some platforms). */
body.woocommerce-checkout ul.payment_methods li input[type="radio"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	margin: 0 0.75rem 0 0 !important;
	width: 1.125rem !important;
	height: 1.125rem !important;
	border: 2px solid #fb6b00 !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	cursor: pointer !important;
	vertical-align: middle !important;
	flex-shrink: 0 !important;
	position: relative !important;
	transition: background-color 180ms ease, box-shadow 180ms ease !important;
}

body.woocommerce-checkout ul.payment_methods li input[type="radio"]:checked {
	background: #fb6b00 !important;
	box-shadow: inset 0 0 0 3px #ffffff !important;
}

body.woocommerce-checkout ul.payment_methods li input[type="radio"]:focus-visible {
	outline: none !important;
	box-shadow:
		inset 0 0 0 3px #ffffff,
		0 0 0 3px rgba(251, 107, 0, 0.25) !important;
}

body.woocommerce-checkout ul.payment_methods li label {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.625rem !important;
	flex-wrap: wrap !important;
	font-family: 'Roboto', sans-serif !important;
	font-weight: 600 !important;
	font-size: 0.9375rem !important;
	color: #1A202C !important;
	margin: 0 !important;
	cursor: pointer !important;
	letter-spacing: -0.005em !important;
}

body.woocommerce-checkout ul.payment_methods li label img {
	margin: 0 !important;
	max-height: 1.5rem !important;
	width: auto !important;
	vertical-align: middle !important;
}

/* The expandable "payment_box" panel below each method — when it appears
   it's white. Strip its legacy ::before triangle and recess the content. */
body.woocommerce-checkout #payment div.payment_box,
body.woocommerce-checkout ul.payment_methods li .payment_box {
	background: transparent !important;
	border: none !important;
	border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
	border-radius: 0 !important;
	padding: 1rem 0 0 !important;
	margin: 1rem 0 0 !important;
	color: #4A5568 !important;
	font-size: 0.875rem !important;
	line-height: 1.5 !important;
}

body.woocommerce-checkout #payment div.payment_box::before {
	display: none !important;
}

/* -------- G) Notice pills — already styled correctly at line 134, but on
   the new gradient backdrop the orange ring needs slightly deeper shadow
   so they don't float weakly. The existing .woocommerce-info rule remains
   the source of truth; we just refresh the spacing rhythm.               */
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .wc-block-components-notice-banner {
	margin: 0 0 1.25rem !important;
	box-shadow:
		0 4px 24px rgba(251, 107, 0, 0.08),
		0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* -------- H) Place order CTA — match editorial primary button vocabulary
   used by the comment-form submit and product buy-card CTA: orange fill,
   0.5rem radius, soft orange shadow, lift-on-hover with deeper shadow. */
body.woocommerce-checkout #place_order,
body.woocommerce-checkout button[id="place_order"],
body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 3.25rem !important;
	padding: 0.95rem 1.75rem !important;
	background: #fb6b00 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 0.625rem !important;
	font-family: 'Roboto', sans-serif !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	cursor: pointer !important;
	box-shadow:
		0 4px 14px rgba(251, 107, 0, 0.28),
		0 1px 2px rgba(0, 0, 0, 0.04) !important;
	transition:
		background-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
		transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout button[id="place_order"]:hover,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
	background: #c85600 !important;
	box-shadow:
		0 6px 20px rgba(200, 86, 0, 0.32),
		0 2px 4px rgba(0, 0, 0, 0.06) !important;
	transform: translateY(-1px) !important;
}

body.woocommerce-checkout #place_order:focus-visible,
body.woocommerce-checkout button[id="place_order"]:focus-visible {
	outline: none !important;
	box-shadow:
		0 0 0 3px #ffffff,
		0 0 0 6px #fb6b00,
		0 6px 20px rgba(251, 107, 0, 0.32) !important;
}

/* -------- I) Cart page — same vocabulary so the path from cart to checkout
   feels seamless. The cart already uses .cartBlock as its outer wrapper
   (paints flat #fff with shadow via shop-styles line 205–219). On the new
   gradient backdrop we want the cartBlock card to inherit the editorial
   shadow + 1rem radius. */
body.woocommerce-cart .cartBlock {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.04) !important;
	border-radius: 1rem !important;
	box-shadow:
		0 4px 24px rgba(0, 0, 0, 0.06),
		0 1px 3px rgba(0, 0, 0, 0.04) !important;
	padding: 2rem !important;
	margin: 1.5rem auto !important;
	max-width: 1060px !important;
}

body.woocommerce-cart .cartBlock:hover {
	transform: none !important;
	box-shadow:
		0 4px 24px rgba(0, 0, 0, 0.06),
		0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* -------- J) Mobile — tighten card padding so blocks don't dominate the
   viewport at small sizes. */
@media (max-width: 768px) {
	body.woocommerce-checkout .woocommerce-billing-fields,
	body.woocommerce-checkout .woocommerce-checkout-payment,
	body.woocommerce-checkout .woocommerce-checkout-review-order,
	body.woocommerce-checkout .wp-block-woocommerce-checkout-fields-block,
	body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block,
	body.woocommerce-checkout .wp-block-woocommerce-checkout-payment-block {
		padding: 1.25rem !important;
		border-radius: 0.875rem !important;
	}

	body.woocommerce-checkout ul.payment_methods li.wc_payment_method,
	body.woocommerce-checkout ul.payment_methods li {
		padding: 1rem 1.125rem !important;
		border-radius: 0.75rem !important;
	}

	/* On narrow viewports let the payment-method label wrap so logos drop
	   below the textual label rather than crowding it horizontally. */
	body.woocommerce-checkout ul.payment_methods li label {
		gap: 0.5rem !important;
	}

	body.woocommerce-checkout ul.payment_methods li label img {
		max-height: 1.25rem !important;
	}

	body.woocommerce-cart .cartBlock {
		padding: 1.25rem !important;
		border-radius: 0.875rem !important;
		margin: 1rem 10px !important;
	}

	body.woocommerce-checkout .main-inner > .container > h1 {
		font-size: 1.625rem !important;
	}
}

/* -------- K) Reduced-motion — strip the lift transitions for users who
   request reduced motion. */
@media (prefers-reduced-motion: reduce) {
	body.woocommerce-checkout #place_order,
	body.woocommerce-checkout button[id="place_order"],
	body.woocommerce-checkout ul.payment_methods li,
	body.woocommerce-checkout form .form-row input.input-text,
	body.woocommerce-checkout form .form-row textarea,
	body.woocommerce-checkout form .form-row select {
		transition: none !important;
	}
	body.woocommerce-checkout #place_order:hover,
	body.woocommerce-checkout button[id="place_order"]:hover {
		transform: none !important;
	}
}