.elementor-2394 .elementor-element.elementor-element-f2b5ea0{--display:flex;--min-height:242px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-2394 .elementor-element.elementor-element-f2b5ea0:not(.elementor-motion-effects-element-type-background), .elementor-2394 .elementor-element.elementor-element-f2b5ea0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://ohbaby.club/wp-content/uploads/2025/09/oat-flakes-with-milk-bear-shape-with-copy-space_23-2148572060-1.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-2394 .elementor-element.elementor-element-f2b5ea0 > .elementor-shape-bottom svg, .elementor-2394 .elementor-element.elementor-element-f2b5ea0 > .e-con-inner > .elementor-shape-bottom svg{height:57px;}.elementor-2394 .elementor-element.elementor-element-3f33065{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2394 .elementor-element.elementor-element-9e6f78a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-widget-woocommerce-product-etheme_title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), poppins;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );color:var( --e-global-color-primary );}.elementor-2394 .elementor-element.elementor-element-5f63685{text-align:center;}.elementor-2394 .elementor-element.elementor-element-5f63685 .elementor-heading-title{font-family:"Chelsea Market", poppins;font-size:18px;font-weight:400;line-height:22px;color:#222222;}.elementor-2394 .elementor-element.elementor-element-e19cf68{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2394 .elementor-element.elementor-element-d42d4e7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2394 .elementor-element.elementor-element-d42d4e7:not(.elementor-motion-effects-element-type-background), .elementor-2394 .elementor-element.elementor-element-d42d4e7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://ohbaby.club/wp-content/uploads/2025/10/Untitled-design-30.png");background-size:100% auto;}.elementor-2394 .elementor-element.elementor-element-9126920{width:100%;max-width:100%;}.elementor-2394 .elementor-element.elementor-element-9126920 > .elementor-widget-container{margin:020px 0px 0px 0px;}.elementor-2394 .elementor-element.elementor-element-9126920.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:1;}.elementor-2394 .elementor-element.elementor-element-9126920 .single_add_to_cart_button .button-text:last-child{margin-left:10px;}.elementor-2394 .elementor-element.elementor-element-9126920 .single_add_to_cart_button .button-text:first-child{margin-right:10px;}.woocommerce .elementor-2394 .elementor-element.elementor-element-9126920 form.cart table.variations label{margin-bottom:0px;}.woocommerce .elementor-2394 .elementor-element.elementor-element-9126920 form.cart table.variations td.value select, .woocommerce .elementor-2394 .elementor-element.elementor-element-9126920 form.cart table.variations td.value:before{border-radius:0px;}.woocommerce .elementor-2394 .elementor-element.elementor-element-9126920 .quantity-wrapper{font-size:15px;max-width:unset;height:50px;}.woocommerce .elementor-2394 .elementor-element.elementor-element-9126920 .quantity-wrapper input{font-size:15px;height:50px;width:50px;}.woocommerce .elementor-2394 .elementor-element.elementor-element-9126920 .quantity-wrapper select{font-size:15px;}.woocommerce .elementor-2394 .elementor-element.elementor-element-9126920 .quantity{height:50px;}.woocommerce .elementor-2394 .elementor-element.elementor-element-9126920 .quantity-select select{height:50px;width:50px;}.elementor-2394 .elementor-element.elementor-element-9126920 .reset_variations{margin-top:0px;}.elementor-2394 .elementor-element.elementor-element-9126920 .single_add_to_cart_button{fill:#FFFFFF;color:#FFFFFF;--loader-side-color:#FFFFFF;padding:15px 15px 15px 15px;}.elementor-2394 .elementor-element.elementor-element-9126920 .single_add_to_cart_button:hover, .elementor-2394 .elementor-element.elementor-element-9126920 .single_add_to_cart_button:focus{color:#FFFFFF;--loader-side-color:#FFFFFF;background-color:#333333;}.elementor-2394 .elementor-element.elementor-element-9126920 .single_add_to_cart_button:hover svg, .elementor-2394 .elementor-element.elementor-element-9126920 .single_add_to_cart_button:focus svg{fill:#FFFFFF;}@media(max-width:1024px){.elementor-widget-woocommerce-product-etheme_title .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}}@media(max-width:767px){.elementor-2394 .elementor-element.elementor-element-f2b5ea0{--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2394 .elementor-element.elementor-element-f2b5ea0:not(.elementor-motion-effects-element-type-background), .elementor-2394 .elementor-element.elementor-element-f2b5ea0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center center;}.elementor-2394 .elementor-element.elementor-element-3f33065{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2394 .elementor-element.elementor-element-9e6f78a{--min-height:164px;}.elementor-widget-woocommerce-product-etheme_title .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-2394 .elementor-element.elementor-element-5f63685 .elementor-heading-title{font-size:30px;line-height:1.4em;}.elementor-2394 .elementor-element.elementor-element-d42d4e7:not(.elementor-motion-effects-element-type-background), .elementor-2394 .elementor-element.elementor-element-d42d4e7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center center;background-size:1000px auto;}.woocommerce .elementor-2394 .elementor-element.elementor-element-9126920 .quantity-wrapper{font-size:17px;max-width:unset;height:60px;}.woocommerce .elementor-2394 .elementor-element.elementor-element-9126920 .quantity-wrapper input{font-size:17px;height:60px;width:47px;}.woocommerce .elementor-2394 .elementor-element.elementor-element-9126920 .quantity-wrapper select{font-size:17px;}.woocommerce .elementor-2394 .elementor-element.elementor-element-9126920 .quantity{height:60px;}.woocommerce .elementor-2394 .elementor-element.elementor-element-9126920 .quantity-select select{height:60px;width:47px;}}@media(min-width:768px){.elementor-2394 .elementor-element.elementor-element-3f33065{--width:25%;}.elementor-2394 .elementor-element.elementor-element-9e6f78a{--width:50%;}.elementor-2394 .elementor-element.elementor-element-e19cf68{--width:25%;}}/* Start custom CSS for woocommerce-product-etheme_add_to_cart, class: .elementor-element-9126920 *//* ========================================================================= */
/* 1. FORCE CENTERING FOR INDIVIDUAL ELEMENTS */
/* ========================================================================= */

/* Targets the main wrapper for interactive elements (dropdown, add to cart) */
.summary.entry-summary .cart {
    display: flex !important;
    flex-direction: column !important; /* Keep main blocks stacked vertically */
    align-items: center !important;    /* Center the stacked blocks */
    width: 100% !important;
}

/* Specific wrapper around the dropdown and button for one-line display and centering */
.wcsatt-options-wrapper.wcsatt-options-grouped {
    display: flex !important;
    flex-direction: row !important;      /* Force items into a single row */
    align-items: center !important;      /* Vertically center items in the row */
    justify-content: center !important;  /* Horizontally center the row itself */
    gap: 15px !important;                /* Space between the dropdown and button */
    margin-top: 20px !important;    
    margin-bottom: 20px !important; 
}

/* ========================================================================= */
/* 4. PRODUCT GRID LAYOUT (3 PRODUCTS PER ROW) */
/* ========================================================================= */

/* Target the table body or the direct parent of your <tr> elements */
/* Based on your HTML snippet, the <tbody> is a good starting point. */
/* We need to override the table display. */
table.products.mm_child_products,
table.products.mm_child_products tbody {
    display: flex !important;
    flex-wrap: wrap !important; /* Allow items to wrap to the next line */
    justify-content: center !important; /* Center the grid items */
    width: 100% !important;
    border-spacing: 0 !important; /* Remove default table spacing */
}

/* Target each product row (the <tr> elements) to make them grid items */
table.products.mm_child_products tbody tr {
    display: flex !important; /* Make each row behave like a flex item */
    flex-direction: column !important; /* Stack content inside each product item */
    width: calc(33.33% - 20px) !important; /* 3 items per row with gaps */
    margin: 10px !important; /* Space between products */
    border: 1px solid #eee !important; /* Optional: add a light border for visual separation */
    border-radius: 8px !important;
    overflow: hidden !important; /* Ensure content stays within borders */
    background-color: #fff !important;
    text-align: center !important;
}

/* Hide table cells (td) within each product item if they are causing issues,
   and make sure the content displays correctly within the flex column */
table.products.mm_child_products tbody tr td {
    display: block !important; /* Make table data cells behave as blocks */
    width: 100% !important;
    padding: 10px !important; /* Adjust padding within each product card */
    box-sizing: border-box !important;
}

/* Specific styling for the product image within the grid */
.child-product-thumbnail img {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 10px auto !important; /* Center image and add space below */
}

/* Adjustments for product title/details */
.child-product-details {
    font-size: 1em !important;
    margin-bottom: 5px !important;
}
.child-product-details .product-title { /* Assuming there's a title class */
    font-weight: bold !important;
    margin-bottom: 5px !important;
}
.child-product-details .price { /* Assuming there's a price class */
    font-size: 0.9em !important;
    color: #555 !important;
    margin-bottom: 10px !important;
}

/* Ensure the quantity controls for each product display correctly within the card */
/* If the +/- quantity .elementor-2394 .elementor-element.elementor-element-9126920s are not .child-product-quantity, inspect them */
.child-product-quantity {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 10px !important;
    padding-bottom: 10px !important; /* Space at the bottom of the card */
}
/* Style the quantity buttons */
.child-product-quantity button { /* Adjust .elementor-2394 .elementor-element.elementor-element-9126920 if your buttons have specific classes */
    background-color: #6AA84F !important; /* Green buttons */
    color: #fff !important;
    border: none !important;
    padding: 5px 10px !important;
    cursor: pointer !important;
    font-size: 1.2em !important;
    border-radius: 4px !important;
}
.child-product-quantity input[type="number"] { /* Style the quantity input field */
    width: 40px !important;
    text-align: center !important;
    margin: 0 5px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    padding: 5px 0 !important;
}


/* ========================================================================= */
/* FIX FOR MOBILE QUANTITY INPUT (Inside @media only screen and (max-width: 768px)) */
/* ========================================================================= */

@media (max-width:768px) {

  .product-quantity .quantity .minus,
  .product-quantity .quantity .plus,
  .product-quantity .quantity-wrapper .minus,
  .product-quantity .quantity-wrapper .plus,
  .product-quantity .quantity a.minus,
  .product-quantity .quantity a.plus,
  .product-quantity .quantity button.minus,
  .product-quantity .quantity button.plus {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 44px !important;
    height: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
    user-select: none !important;

    /* Some themes hide the text and rely on pseudo elements — we will draw our own */
    font-size: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Draw the minus icon */
  .product-quantity .quantity .minus::before,
  .product-quantity .quantity-wrapper .minus::before,
  .product-quantity .quantity a.minus::before,
  .product-quantity .quantity button.minus::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 14px !important;
    height: 2px !important;
    background: currentColor !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 2px !important;
  }

  /* Draw the plus icon (horizontal + vertical) */
  .product-quantity .quantity .plus::before,
  .product-quantity .quantity-wrapper .plus::before,
  .product-quantity .quantity a.plus::before,
  .product-quantity .quantity button.plus::before,
  .product-quantity .quantity .plus::after,
  .product-quantity .quantity-wrapper .plus::after,
  .product-quantity .quantity a.plus::after,
  .product-quantity .quantity button.plus::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    background: currentColor !important;
    border-radius: 2px !important;
  }
  /* horizontal bar */
  .product-quantity .quantity .plus::before,
  .product-quantity .quantity-wrapper .plus::before,
  .product-quantity .quantity a.plus::before,
  .product-quantity .quantity button.plus::before {
    width: 14px !important;
    height: 2px !important;
    transform: translate(-50%, -50%) !important;
  }
  /* vertical bar */
  .product-quantity .quantity .plus::after,
  .product-quantity .quantity-wrapper .plus::after,
  .product-quantity .quantity a.plus::after,
  .product-quantity .quantity button.plus::after {
    width: 2px !important;
    height: 14px !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Disabled state still visible (just faded) */
  .product-quantity .quantity .minus[disabled]::before,
  .product-quantity .quantity .plus[disabled]::before,
  .product-quantity .quantity .plus[disabled]::after {
    opacity: 0.45 !important;
  }
}


/* ========================================================================= */
/* 3. DROPDOWN STYLING & SPACING */
/* ========================================================================= */

/* Targets the dropdown select element itself to reset spacing/height */
select.wcsatt-options-product-dropdown {
    /* Height and Padding */
    padding: 12px 15px !important; 
    height: auto !important;
    line-height: 1.2 !important;

    /* Styling - Ensured strong overrides */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width:300px !important;             
    border: 1px solid  !important; 
    border-radius: 20px !important;       
    background-color: #FFFFFF !important; 
    color: #333333 !important;           
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}/* End custom CSS */