/**
 * Satmo Button Styles
 * 
 * Styles for "Pay with Satmo" buttons that appear on product pages,
 * shop pages, and checkout. This file follows a component-based approach
 * with shared variables for consistency.
 */

/* Gotham Medium font declarations */
@font-face {
    font-family: 'Gotham Medium';
    src: url('../fonts/Gotham Medium/Gotham Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  
  /* Gotham Medium utility classes for buttons */
  .gotham-medium {
    font-family: "Gotham Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    font-weight: 500 !important;
    font-style: normal !important;
  }
  
  /* Common button properties for reuse */
  :root {
      --satmo-primary: #FF9900;
      --satmo-hover: #D88200;
      --satmo-text: white;
      --satmo-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
      --satmo-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
    /* Base Button Styles - shared properties (only for non-customized buttons) */
    .satmo-buy-now-btn:not(.satmo-customized-button) {
      background-color: var(--satmo-primary) !important;
      color: var(--satmo-text) !important;
      font-weight: 400 !important;
      transition: all 0.3s ease !important;
      border-color: var(--satmo-primary) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-transform: uppercase !important;
      letter-spacing: 0.5px !important;
      box-shadow: var(--satmo-shadow-sm) !important;
      text-decoration: none !important;
      white-space: nowrap !important;
      text-align: center !important;
      cursor: pointer !important;
      box-sizing: border-box !important;
  }
  
    /* Button hover states (only for non-customized buttons) */
    .satmo-buy-now-btn:not(.satmo-customized-button):hover {
      background-color: var(--satmo-hover) !important;
      border-color: var(--satmo-hover) !important;
      box-shadow: var(--satmo-shadow-md) !important;
      transform: translateY(-1px) !important;
  }
  
    /* Button active states (only for non-customized buttons) */
    .satmo-buy-now-btn:not(.satmo-customized-button):active {
      transform: translateY(1px) !important;
      box-shadow: var(--satmo-shadow-sm) !important;
  }
  
    /* Product page specific button styling (only for non-customized buttons) */
    a.satmo-buy-now-btn:not(.satmo-customized-button) {
      margin: 0 5px !important;
      min-height: 3.5em !important;
      line-height: 2.5em !important;
      padding: 0 1.5em !important;
      position: relative !important;
      overflow: hidden !important;
  }
  
    /* Button shine animation (only for non-customized buttons) */
    a.satmo-buy-now-btn:not(.satmo-customized-button):before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: -100% !important;
      width: 100% !important;
      height: 100% !important;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
      transition: left 0.7s !important;
  }
  
    a.satmo-buy-now-btn:not(.satmo-customized-button):hover:before {
      left: 100% !important;
  }
  
  
  /* Logo styling */
  .satmo-button-logo, 
  .satmo-logo-img {
      height: 20px !important;
      width: auto !important;
      display: inline-flex !important;
      flex: 0 0 auto !important;
      vertical-align: middle !important;
      margin-left: 5px !important;
      white-space: nowrap !important;
  }
  
  /* Button container for shop pages */
  .satmo_buttons_container {
      display: flex !important;
      flex-direction: column !important;
      flex-wrap: nowrap !important;
      justify-content: center !important;
      align-items: center !important;
      margin: 10px 0 15px 0 !important; /* Only vertical margins for proper centering */
      padding: 0 8px !important; /* Use padding for horizontal spacing */
      width: 100% !important; /* Ensure full width for proper centering */
      box-sizing: border-box !important;
      text-align: center !important; /* Fallback for text centering */
  }
  
  .satmo_buttons_container .wc-block-components-product-button__button,
  .satmo_buttons_container .wp-block-button,
  .satmo_buttons_container .button {
      margin-right: 0 !important;
      margin-bottom: 5px !important;
      width: auto !important;
  }
  
    /* Button wrapper for product pages - now using separate wrappers */
  .satmo-button-wrapper {
      display: flex;
      gap: 10px;
      margin-top: 10px;
        flex-wrap: nowrap;
        align-items: center;
    }
    
    /* New layout: quantity + add to cart on one line, pay with satmo on separate line */
    .satmo-quantity-addtocart-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
    }
    
    .satmo-add-to-cart-wrapper {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }
    
  /* Fix Add to Basket button width on Shopkeeper theme */
  .theme-shopkeeper .satmo-add-to-cart-wrapper .single_add_to_cart_button,
  .shopkeeper .satmo-add-to-cart-wrapper .single_add_to_cart_button {
      width: auto !important;
      min-width: auto !important;
      max-width: none !important;
      flex: 0 0 auto !important;
      text-align: center !important;
      padding: 0.75em 1.5em !important;
  }
  
  /* Shopkeeper theme product page button spacing */
  .theme-shopkeeper .single-product .satmo-buy-now-wrapper,
  .shopkeeper .single-product .satmo-buy-now-wrapper {
      margin: 25px 0 30px 0 !important;
      padding: 20px 0 !important;
      clear: both !important;
      position: relative !important;
      z-index: 1 !important;
      border-top: 1px solid #e0e0e0 !important;
      border-bottom: 1px solid #e0e0e0 !important;
  }
    
    .satmo-buy-now-wrapper {
        width: 100% !important;
        margin-top: 15px !important;
        display: flex !important;
        justify-content: flex-start !important;
        padding-top: 5px !important;
    }
    
    /* Immediate positioning for product page buttons to prevent jumping */
    form.cart.satmo-fixed-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 20px !important;
        width: 100% !important;
    }
    
    /* Override theme-specific alignment issues */
    .woocommerce form.cart.satmo-fixed-layout,
    .woocommerce-page form.cart.satmo-fixed-layout,
    .single-product form.cart.satmo-fixed-layout {
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
    
    /* Ensure quantity and add to cart stay on the left */
    .satmo-quantity-addtocart-wrapper .quantity {
        margin-right: 10px !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        flex: 0 0 auto !important;
        float: none !important;
    }
    
    .satmo-quantity-addtocart-wrapper .single_add_to_cart_button {
        margin: 0 !important;
        flex: 0 0 auto !important;
        float: none !important;
    }
    
    /* Theme-specific overrides to prevent right alignment */
    .theme-twentytwentyfive .satmo-quantity-addtocart-wrapper,
    .twentytwentyfive .satmo-quantity-addtocart-wrapper,
    .wp-theme-twentytwentyfive .satmo-quantity-addtocart-wrapper {
        justify-content: flex-start !important;
        align-items: center !important;
    }
    
    .theme-storefront .satmo-quantity-addtocart-wrapper,
    .storefront .satmo-quantity-addtocart-wrapper {
        justify-content: flex-start !important;
        align-items: center !important;
    }
    
    .theme-astra .satmo-quantity-addtocart-wrapper,
    .astra .satmo-quantity-addtocart-wrapper {
        justify-content: flex-start !important;
        align-items: center !important;
    }
    
    /* Override any theme float or positioning */
    .satmo-quantity-addtocart-wrapper * {
        float: none !important;
        clear: none !important;
    }
    
    /* Force left alignment for all themes */
    .satmo-quantity-addtocart-wrapper {
        text-align: left !important;
        direction: ltr !important;
    }
    
    .satmo-quantity-addtocart-wrapper .quantity,
    .satmo-quantity-addtocart-wrapper .single_add_to_cart_button {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 10px !important;
    }
    
    /* Additional theme overrides */
    body .satmo-quantity-addtocart-wrapper {
        justify-content: flex-start !important;
        align-items: center !important;
        flex-direction: row !important;
    }
    
    /* Ensure the wrapper itself is left-aligned */
    form.cart.satmo-fixed-layout .satmo-quantity-addtocart-wrapper {
        margin-left: 0 !important;
        margin-right: auto !important;
        align-self: flex-start !important;
    }
    
    .satmo-buy-now-wrapper .satmo-buy-now-btn {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 12px 16px !important;
    }
    
    /* Ensure the Pay with Satmo button looks good at full width */
    .satmo-buy-now-wrapper .satmo-buy-now-btn.satmo-customized-button {
        width: 100% !important;
        max-width: 100% !important;
        height: 50px !important;
        margin: 0 !important;
        padding: 8px 16px !important;
    }
    
    /* Product page button spacing - ensure 10px top margin */
    .single-product .satmo-buy-now-btn.satmo-customized-button,
    .single-product a.satmo-buy-now-btn.satmo-customized-button {
        margin-top: 10px !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    form.cart .quantity {
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        flex: 0 0 auto !important;
    }
    
    /* Show the button by default, hide only during positioning */
    a.satmo-buy-now-btn {
        opacity: 1;
        transition: opacity 0.1s ease;
    }
    
    a.satmo-buy-now-btn.satmo-positioning {
        opacity: 0;
    }
    
    a.satmo-buy-now-btn.satmo-positioned {
        opacity: 1;
  }
  
  /* Container for shop/archive pages */
  .satmo-buy-now-container {
      margin: 10px 0 15px 0 !important; /* Only vertical margins */
      text-align: center;
      width: 100% !important;
      box-sizing: border-box !important;
      position: relative !important;
      z-index: 1 !important;
      padding: 0 8px !important; /* Use padding instead of margin for horizontal spacing */
  }
  
  /* Text container for consistent button text display */
  .satmo-button-text-container {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      white-space: nowrap !important;
      flex-wrap: nowrap !important;
      text-align: center !important;
      width: 100% !important;
  }
  
  /* Disabled button state */
  .satmo-buy-now-btn.disabled {
      opacity: 0.5 !important;
      cursor: not-allowed !important;
  }
  
  /* Enhanced disabled state for variable products */
  .satmo-buy-now-btn[aria-disabled="true"] {
      opacity: 0.5 !important;
      cursor: not-allowed !important;
      filter: grayscale(50%) !important;
  }
  
  /* Disabled state for customized buttons */
  .satmo-buy-now-btn.satmo-customized-button.disabled,
  .satmo-buy-now-btn.satmo-customized-button[aria-disabled="true"] {
      opacity: 0.5 !important;
      cursor: not-allowed !important;
      filter: grayscale(50%) !important;
      background: rgba(200, 200, 200, 0.8) !important;
      border-color: rgba(150, 150, 150, 0.8) !important;
  }
  
  /* Dark customized button disabled state */
  .satmo-buy-now-btn.satmo-customized-button.satmo-dark-button.disabled,
  .satmo-buy-now-btn.satmo-customized-button.satmo-dark-button[aria-disabled="true"] {
      background: rgba(100, 100, 100, 0.8) !important;
      border-color: rgba(100, 100, 100, 0.8) !important;
  }
  
  /* Toast notification styles - using WooCommerce classes */
  .satmo-toast.woocommerce-message {
      position: fixed !important;
      top: 20px !important;
      right: 20px !important;
      z-index: 99999 !important;
      max-width: 400px !important;
      margin: 0 !important;
      padding: 1em 1.5em !important;
      opacity: 0 !important;
      transform: translateX(100%) !important;
      transition: all 0.3s ease !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
      border-radius: 4px !important;
      font-size: 14px !important;
      line-height: 1.4 !important;
      word-wrap: break-word !important;
  }
  
  /* Mobile responsive toast */
  @media screen and (max-width: 768px) {
      .satmo-toast.woocommerce-message {
          top: 10px !important;
          right: 10px !important;
          left: 10px !important;
          max-width: none !important;
          transform: translateY(-100%) !important;
      }
      
      .satmo-toast.woocommerce-message.show {
          transform: translateY(0) !important;
      }
  }
  
  /* ========================================
     CUSTOMIZED BUTTON STYLES FOR SHOP/PRODUCT PAGES
     ======================================== */
  
    /* Customized button base styles - use same structure as express checkout */
  .satmo-buy-now-btn.satmo-customized-button {
        width: 100% !important;
        max-width: 343px !important;
        min-width: 150px !important; /* Minimum width to maintain readability */
        height: 50px !important;
        border: 1px solid rgba(0, 0, 0, 1) !important;
        padding: 8px 16px !important;
        margin: 0 !important; /* Remove margins, let flexbox handle centering */
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        position: relative !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        border-radius: 8px; /* Default rounded - will be overridden for square */
        text-decoration: none !important;
        background: rgba(255, 255, 255, 1) !important; /* Override theme colors */
        color: inherit !important;
        font-family: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
        text-transform: none !important;
        letter-spacing: normal !important;
      box-shadow: none !important;
        transform: none !important;
  }
  
    /* Customized button hover/active states - remove scale and opacity effects */
  .satmo-buy-now-btn.satmo-customized-button:hover {
      text-decoration: none !important;
  }
    
    /* Customized button active states handled by light/dark specific rules below */
    
    /* Light customized button hover/active states - make darker */
    .satmo-buy-now-btn.satmo-customized-button.satmo-light-button:hover,
    .satmo-buy-now-btn.satmo-customized-button.satmo-light-button:active {
        background: rgba(235, 235, 235, 1) !important;
        border: 1px solid rgba(0, 0, 0, 0.65) !important;
    }
    
    /* Dark customized button hover/active states - make lighter */
    .satmo-buy-now-btn.satmo-customized-button.satmo-dark-button:hover,
    .satmo-buy-now-btn.satmo-customized-button.satmo-dark-button:active {
        background: rgba(60, 60, 60, 1) !important;
        border: 1px solid rgba(60, 60, 60, 1) !important;
    }
  
  .satmo-buy-now-btn.satmo-customized-button:focus,
  .satmo-buy-now-btn.satmo-customized-button:active,
  .satmo-buy-now-btn.satmo-customized-button:visited {
      outline: none !important;
        text-decoration: none !important;
    }
    
    /* Button content container */
    .satmo-customized-button-content {
        height: 28px;
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .woocommerce ul.products li.product div.product-details.entry-content-wrap {
        height: 180px !important;
    }
    
    .satmo-customized-button-content img {
        margin-bottom: 0px !important;
        height: 28px;
        width: auto;
        display: block;
    }
    
    /* Button styles - with maximum specificity to override theme */
  .satmo-buy-now-btn.satmo-light-button {
        background: rgba(255, 255, 255, 1) !important;
        border: 1px solid rgba(0, 0, 0, 1) !important;
        background-color: rgba(255, 255, 255, 1) !important;
        border-color: rgba(0, 0, 0, 1) !important;
  }
  
  .satmo-buy-now-btn.satmo-dark-button {
        background: rgba(0, 0, 0, 1) !important;
        border: 1px solid rgba(0, 0, 0, 1) !important;
        background-color: rgba(0, 0, 0, 1) !important;
        border-color: rgba(0, 0, 0, 1) !important;
    }
    
    /* Override any theme-specific button styles - but preserve dark/light customization */
    .woocommerce .satmo-buy-now-btn.satmo-customized-button:not(.satmo-dark-button),
    .single-product .satmo-buy-now-btn.satmo-customized-button:not(.satmo-dark-button),
    .woocommerce-page .satmo-buy-now-btn.satmo-customized-button:not(.satmo-dark-button),
    .woocommerce-cart .satmo-buy-now-btn.satmo-customized-button:not(.satmo-dark-button),
    .woocommerce-checkout .satmo-buy-now-btn.satmo-customized-button:not(.satmo-dark-button),
    .shop .satmo-buy-now-btn.satmo-customized-button:not(.satmo-dark-button),
    .archive .satmo-buy-now-btn.satmo-customized-button:not(.satmo-dark-button) {
        background: rgba(255, 255, 255, 1) !important;
        background-color: rgba(255, 255, 255, 1) !important;
        border: 1px solid rgba(0, 0, 0, 1) !important;
        border-color: rgba(0, 0, 0, 1) !important;
        color: #000 !important;
        text-decoration: none !important;
        box-shadow: none !important;
        transform: none !important;
        transition: all 0.2s ease !important;
    }
    
    /* Ensure dark buttons maintain their dark styling */
    .woocommerce .satmo-buy-now-btn.satmo-customized-button.satmo-dark-button,
    .single-product .satmo-buy-now-btn.satmo-customized-button.satmo-dark-button,
    .woocommerce-page .satmo-buy-now-btn.satmo-customized-button.satmo-dark-button,
    .woocommerce-cart .satmo-buy-now-btn.satmo-customized-button.satmo-dark-button,
    .woocommerce-checkout .satmo-buy-now-btn.satmo-customized-button.satmo-dark-button,
    .shop .satmo-buy-now-btn.satmo-customized-button.satmo-dark-button,
    .archive .satmo-buy-now-btn.satmo-customized-button.satmo-dark-button {
        background: rgba(0, 0, 0, 1) !important;
        background-color: rgba(0, 0, 0, 1) !important;
        border: 1px solid rgba(0, 0, 0, 1) !important;
        border-color: rgba(0, 0, 0, 1) !important;
        color: #fff !important;
        text-decoration: none !important;
        box-shadow: none !important;
        transform: none !important;
        transition: all 0.2s ease !important;
    }
    
    /* Override Shopkeeper theme specific styles - but preserve dark/light customization */
    .theme-shopkeeper .satmo-buy-now-btn.satmo-customized-button:not(.satmo-dark-button),
    .shopkeeper .satmo-buy-now-btn.satmo-customized-button:not(.satmo-dark-button) {
        background: rgba(255, 255, 255, 1) !important;
        background-color: rgba(255, 255, 255, 1) !important;
        border: 1px solid rgba(0, 0, 0, 1) !important;
        border-color: rgba(0, 0, 0, 1) !important;
        color: #000 !important;
        text-decoration: none !important;
        box-shadow: none !important;
        transform: none !important;
        transition: all 0.2s ease !important;
    }
    
    /* Ensure dark buttons work on Shopkeeper theme */
    .theme-shopkeeper .satmo-buy-now-btn.satmo-customized-button.satmo-dark-button,
    .shopkeeper .satmo-buy-now-btn.satmo-customized-button.satmo-dark-button {
        background: rgba(0, 0, 0, 1) !important;
        background-color: rgba(0, 0, 0, 1) !important;
        border: 1px solid rgba(0, 0, 0, 1) !important;
        border-color: rgba(0, 0, 0, 1) !important;
        color: #fff !important;
        text-decoration: none !important;
        box-shadow: none !important;
        transform: none !important;
        transition: all 0.2s ease !important;
    }
    
    /* Button shapes */
    .satmo-buy-now-btn.satmo-rounded-button {
        border-radius: 8px !important;
    }
    
    .satmo-buy-now-btn.satmo-square-button {
        border-radius: 0 !important;
  }
  
  /* Express Checkout Integration - These styles are now handled by satmo-express-checkout.css */
  /* The express checkout button appears above payment methods instead of hijacking the place order button */
  
  /* Checkout logo specific styling for crisp rendering - optimized for inline SVG */
  .satmo-checkout-logo {
      height: 24px !important;
      width: auto !important;
      margin-left: 4px !important;
      margin-right: 4px !important;
      vertical-align: middle !important;
      shape-rendering: geometricPrecision !important;
      image-rendering: optimizeQuality !important;
      text-rendering: optimizeLegibility !important;
      transform: translateZ(0) !important;
      backface-visibility: hidden !important;
  }
  
  /* ========================================
     CLASSIC THEME CHECKOUT BUTTON STYLES
     ======================================== */
  
  /* Classic theme express checkout integration - styles handled by satmo-express-checkout.css */
  
  /* Responsive styles for tablet and mobile */
  @media screen and (max-width: 768px) {
      /* Container adjustments */
      .satmo_buttons_container {
          width: 100% !important;
      }
      
        /* Button container adjustments - maintain layout on mobile */
        .satmo-quantity-addtocart-wrapper {
            flex-direction: row !important;
            width: 100% !important;
            gap: 10px !important;
        }
        
        .satmo-buy-now-wrapper {
            display: block !important;
            width: 100% !important;
            margin-top: 15px !important;
            padding-top: 5px !important;
        }
        
        /* Override orange hover effect on mobile for Pay with Satmo button */
        @media only screen and (max-width: 767px) {
            body.single-product .product_content_wrapper .product_infos form.cart .satmo-buy-now-btn:hover,
            body.single-product .product_content_wrapper .product_infos form.cart .satmo-buy-now-btn:active,
            body.single-product .product_content_wrapper .product_infos form.cart .satmo-buy-now-btn:focus {
                background: rgba(255, 255, 255, 1) !important;
                background-color: rgba(255, 255, 255, 1) !important;
                border: 1px solid rgba(0, 0, 0, 1) !important;
                border-color: rgba(0, 0, 0, 1) !important;
                color: #000 !important;
            }
            
            /* Override for dark button on mobile */
            body.single-product .product_content_wrapper .product_infos form.cart .satmo-buy-now-btn.satmo-dark-button:hover,
            body.single-product .product_content_wrapper .product_infos form.cart .satmo-buy-now-btn.satmo-dark-button:active,
            body.single-product .product_content_wrapper .product_infos form.cart .satmo-buy-now-btn.satmo-dark-button:focus {
                background: rgba(0, 0, 0, 1) !important;
                background-color: rgba(0, 0, 0, 1) !important;
                border: 1px solid rgba(0, 0, 0, 1) !important;
                border-color: rgba(0, 0, 0, 1) !important;
                color: #fff !important;
            }
            
            /* Override for light button hover on mobile */
            body.single-product .product_content_wrapper .product_infos form.cart .satmo-buy-now-btn.satmo-light-button:hover,
            body.single-product .product_content_wrapper .product_infos form.cart .satmo-buy-now-btn.satmo-light-button:active,
            body.single-product .product_content_wrapper .product_infos form.cart .satmo-buy-now-btn.satmo-light-button:focus {
                background: rgba(235, 235, 235, 1) !important;
                background-color: rgba(235, 235, 235, 1) !important;
                border: 1px solid rgba(0, 0, 0, 0.65) !important;
                border-color: rgba(0, 0, 0, 0.65) !important;
                color: #000 !important;
            }
        }
        
        /* Button adjustments (only for non-customized buttons) */
        .satmo-buy-now-btn:not(.satmo-customized-button) {
          width: 100% !important;
          margin: 5px 0 10px 0 !important;
          padding: 0.75rem 1rem !important;
          font-size: 0.85em !important;
      }
      
      /* Customized button responsive adjustments */
      .satmo-buy-now-btn.satmo-customized-button {
            /* Maintain width logic: stretch when < 343px, cap at 343px when ≥ 343px */
            width: 100% !important;
            max-width: 343px !important;
            min-width: 120px !important; /* Reduced for better centering on mobile */
            height: 48px;
            padding: 6px 12px;
            margin: 0 auto !important; /* Center the button within its container */
        }
        
        .satmo-customized-button-content {
            height: 26px;
        }
        
        .satmo-customized-button-content img {
            height: 26px;
      }
      
      /* Product container adjustments */
      li.product, 
      li.wc-block-grid__product, 
      li.wc-block-product {
          margin-bottom: 20px !important;
          position: relative !important;
      }
      
      /* Ensure proper spacing on mobile */
      .satmo-buy-now-container {
          margin: 8px 0 12px 0 !important; /* Reduced margins on mobile */
          padding: 0 6px !important; /* Reduced padding on mobile */
      }
      
      /* Adjust product grid spacing on mobile */
      .woocommerce ul.products li.product,
      .woocommerce-page ul.products li.product,
      .wc-block-grid__product,
      .wp-block-woocommerce-product-grid li {
          margin-bottom: 25px !important; /* Slightly reduced on mobile */
          padding: 0 6px !important; /* Reduced padding on mobile */
      }
      
      /* Classic theme express checkout adjustments handled by satmo-express-checkout.css */
  }
  
  /* Extra small screen adjustments */
  @media screen and (max-width: 480px) {
      
      /* Customized button extra small screen adjustments */
      .satmo-buy-now-btn.satmo-customized-button {
            /* Maintain width logic: stretch when < 343px, cap at 343px when ≥ 343px */
            width: 100% !important;
            max-width: 343px !important;
            min-width: 100px !important; /* Further reduced for extra small screens */
            height: 44px;
            padding: 6px 10px;
            margin: 0 auto !important; /* Center the button within its container */
        }
        
        .satmo-customized-button-content {
            height: 24px;
        }
        
        .satmo-customized-button-content img {
            height: 24px;
      }
      
      .satmo_buttons_container {
          margin: 10px 6px 20px 6px !important; /* Add horizontal margins on mobile */
          padding: 0 2px !important; /* Reduced internal padding on mobile */
      }
      
      /* Extra small screen spacing adjustments */
      .satmo-buy-now-container {
          margin: 6px 0 10px 0 !important; /* Even smaller margins on very small screens */
          padding: 0 4px !important; /* Minimal padding on very small screens */
      }
      
      /* Further reduce product grid spacing on very small screens */
      .woocommerce ul.products li.product,
      .woocommerce-page ul.products li.product,
      .wc-block-grid__product,
      .wp-block-woocommerce-product-grid li {
          margin-bottom: 20px !important; /* Further reduced on very small screens */
          padding: 0 4px !important; /* Minimal padding on very small screens */
      }
      
      .wc-block-components-checkout-place-order-button {
          width: 100% !important;
      }
      
      /* Classic theme express checkout adjustments handled by satmo-express-checkout.css */
  }

  /* Fix centering for small screens - proper container centering */
  @media screen and (max-width: 500px) {
    .satmo_buttons_container {
        padding: 0 4px !important; /* Minimal padding for small screens */
        margin: 10px 0 15px 0 !important; /* Reset to normal margins */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
  }



  /* Fix centering for very narrow product cards (less than 200px) */
  @media screen and (max-width: 200px) {
    .wc-block-grid__product .satmo_buttons_container,
    .wp-block-woocommerce-product-grid li .satmo_buttons_container {
        padding: 0 2px !important; /* Minimal padding for very narrow cards */
        margin: 8px 0 12px 0 !important; /* Normal margins */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
  }

  /* Fix centering for extremely narrow product cards (less than 180px) */
  @media screen and (max-width: 180px) {
    .wc-block-grid__product .satmo_buttons_container,
    .wp-block-woocommerce-product-grid li .satmo_buttons_container {
        padding: 0 1px !important; /* Absolute minimal padding */
        margin: 6px 0 10px 0 !important; /* Normal margins */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
  }

  /* Ensure product grid items have proper spacing and don't overlap */
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  .wc-block-grid__product,
  .wp-block-woocommerce-product-grid li {
      margin-bottom: 30px !important; /* Increased bottom margin for better spacing */
      padding: 0 8px !important; /* Add horizontal padding to prevent overlap */
      box-sizing: border-box !important;
  }

  /* Ensure proper centering for WooCommerce Blocks product cards */
  .wc-block-grid__product,
  .wp-block-woocommerce-product-grid li {
      text-align: center !important; /* Center all content in the card */
  }

  /* Ensure the button container is properly centered in narrow cards */
  .wc-block-grid__product .satmo_buttons_container,
  .wp-block-woocommerce-product-grid li .satmo_buttons_container {
      margin-left: auto !important;
      margin-right: auto !important;
      max-width: 100% !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
  }
  
  /* Force centering with maximum specificity */
  .woocommerce .wc-block-grid__product .satmo_buttons_container,
  .woocommerce-page .wc-block-grid__product .satmo_buttons_container,
  .wp-block-woocommerce-product-grid li .satmo_buttons_container {
      margin-left: auto !important;
      margin-right: auto !important;
      max-width: 100% !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      text-align: center !important;
  }

  /* Ensure shop buttons don't cause grid items to overflow */
  .satmo-buy-now-container {
      clear: both !important; /* Prevent floating issues */
      overflow: hidden !important; /* Prevent content overflow */
  }