/*
Theme Name: Hello Child
Template: hello-elementor
*/

/* =====================================================
   WooCommerce – Global Styling Scaffold
   Theme: Hello (Elementor)
   Purpose: Control Woo shortcode rendering without Elementor Pro
   ===================================================== */

:root {
  /* Body text */
  --sns-font-body:
    var(--e-global-typography-text-font-weight, 700)
    var(--e-global-typography-text-font-size, 16px) /
    var(--e-global-typography-text-line-height, 1.6)
    var(--e-global-typography-text-font-family, "Roboto", Arial, Helvetica, sans-serif);

  /* Headings */
  --sns-font-head:
    var(--e-global-typography-primary-font-weight, 700)
    var(--e-global-typography-primary-font-size, 50px) /
    var(--e-global-typography-primary-line-height, 1.2)
    var(--e-global-typography-primary-font-family, "Montserrat", Arial, Helvetica, sans-serif);

  /* Colors */
  --sns-color-primary:   var(--e-global-color-primary, #1A1A14);
  --sns-color-secondary: var(--e-global-color-secondary, #FFFFFF);
  --sns-color-text:      var(--e-global-color-text, #1A1A14);
  --sns-color-accent:    var(--e-global-color-accent, #FFB80E);
  
  --sns-deep-navy: #1B3A5F;
  --sns-warm-black: #1A1A14;  
  --sns-light-blue: #6B7F97; 
	
  --checkout-content-width: 42%;
	
}




/* =====================================================
   1. Global Woo Wrapper
   -----------------------------------------------------
   Use this to set baseline typography and text color
   ===================================================== */

.woocommerce,
.woocommerce-page {
    font: var(--sns-font-body);    
	color:var(--sns-warm-black);
  /* font-family: ; */
  /* color: ; */
}



/* =====================================================
   2. Headings (Checkout, Cart, Notices)
   ===================================================== */

.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce h4 {
	/* font-weight: ; */
  /* letter-spacing: ; */
  /* margin-bottom: ; */
}


/* =====================================================
   3. Form Labels & Help Text
   ===================================================== */

.woocommerce label {
  /* font-size: ; */
  /* font-weight: ; */
  /* color: ; */
}

.woocommerce .woocommerce-form__label {
  /* checkbox/radio labels */
}


/* =====================================================
   4. Inputs, Selects, Textareas
   ===================================================== */

.woocommerce input,
.woocommerce textarea,
.woocommerce select {
  /* background-color: ; */
  /* border: ; */
  /*border-radius: 50;
  /* padding: ; */
  /* font-size: ; */
}

.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
  /* border-color: ; */
  /* outline: none; */
  /* box-shadow: ; */
}


/* =====================================================
   5. Primary Buttons (Add to Cart, Place Order)
   ===================================================== */

.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
  /* background-color: ; */
  /* color: ; */
  /* border-radius: ; */
  /* padding: ; */
  /* font-weight: ; */
  /* text-transform: none; */
}

.woocommerce button.button:hover,
.woocommerce a.button:hover {
  /* background-color: ; */
}


/* =====================================================
   6. Secondary / Ghost Buttons (if used)
   ===================================================== */

.woocommerce .button.alt {
  /* background-color: ; */
}


/* =====================================================
   7. Checkout Layout & Spacing
   ===================================================== */

.woocommerce-checkout .form-row {
  /* margin-bottom: ; */
}

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields {
  /* margin-bottom: ; */
}


/* =====================================================
   8. Remove Unnecessary Checkout Elements (Digital Goods)
   ===================================================== */

/* Order notes */
.woocommerce-checkout .woocommerce-additional-fields {
  display: none;
}

/* Coupon toggle */
.woocommerce-form-coupon-toggle {
  display: none;
}


/* =====================================================
   9. Notices, Errors, Messages
   ===================================================== */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  /* border-radius: ; */
  /* font-size: ; */
}

.woocommerce-error {
  /* background-color: ; */
  /* color: ; */
}


/* =====================================================
   10. Product Summary (if using product pages)
   ===================================================== */

.single-product .product_title {
  /* font-size: ; */
  /* font-weight: ; */
}

.single-product .price {
  /* font-size: ; */
  /* color: ; */
}


/* =====================================================
   11. Checkout Page–Only Overrides
   -----------------------------------------------------
   Useful if you want checkout to feel distinct
   ===================================================== */

body.woocommerce-checkout {
  /* background-color: ; */
}


/* =====================================================
   12. Utility / Debug (optional)
   ===================================================== */

/*
.woocommerce * {
  outline: 1px solid rgba(255,0,0,0.1);
}
*/

/* Center billing details */
.woocommerce-checkout .col2-set {
  display: flex;
  justify-content: center;
}

.woocommerce-checkout .col2-set .col-1 {
  float: none;
  width: var(--checkout-content-width);
  max-width: 520px;
}

/* Center order review + match billing width */
.woocommerce-checkout-review-order {
  margin: 0 auto 2rem;
  width: var(--checkout-content-width);
  max-width: 520px;
}


/* =====================================================
   Stripe Checkout Customization
   -----------------------------------------------------
   - Remove Google Pay / Link express buttons
   - Restyle Stripe card container
   - Normalize Stripe field appearance
   ===================================================== */

/* Hide Stripe express checkout buttons (Google Pay / Link) */
.wc-stripe-payment-request-wrapper,
.wc-stripe-payment-request-button {
  display: none !important;
}

/* Stripe payment box background + layout */
.woocommerce-checkout .payment_box.payment_method_stripe {
  background-color: var(--sns-color-secondary, #f5f5f5);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 16px;
}

/* Remove Stripe-injected background tint */
.wc-stripe-elements-field {
  background: transparent !important;
}

/* Ensure Stripe inputs inherit site typography */
.wc-stripe-elements-field,
.wc-stripe-elements-field iframe {
  font: var(--sns-font-body);
}