/*The code below attempts to fix the weird "choose an option" overflowing issue on the merch page. */
.summary.entry-summary {
    flex: 1 0 300px !important;
    min-width: 300px;
}

.variations select {
    width: 100% !important;
    min-width: 200px;
    text-align: left;
}

/* Making the variations form (dropdowns) aligns to the left edge */
.variations_form.cart {
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* Optional: Ensure the options within the dropdown are also left-aligned (modern browsers) */
.variations select option {
    text-align: left;
}

/* Ensure variation labels are left-aligned */
.variations label {
    text-align: left;
    float: none; /* remove float if theme uses it */
    display: block; /* optional, may help alignment */
}

.variations th.label,
.variations td.label {
    text-align: left !important;
    padding-left: 0 !important;
}
.variations td.value {
    text-align: left !important;
}

table.variations td.value select {
    text-align: left !important;
    float: left !important;
}
table.variations td.label {
    text-align: left !important;
}

/* Ensure the dropdown itself isn't pushed right by margins */
.variations td.value select {
    margin-left: 0 !important;
    margin-right: auto !important;
    display: block; /* Helps if the theme is using inline-block */
}

.woocommerce .variations select {
    text-align: left !important;
    margin-right: auto !important;
    display: block;
}
.woocommerce .variations td.value {
    text-align: left !important;
}

/*added 2026.2.16*/
/* 1. Force the entire table and its rows to align left */
table.variations, 
table.variations tr, 
table.variations td, 
table.variations th {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* 2. Target the specific cell holding the dropdown */
table.variations td.value {
    text-align: left !important;
    display: table-cell !important; /* Resets any flexbox interference */
}

/* 3. Ensure the dropdown itself doesn't have an 'auto' left margin */
table.variations td.value select {
    margin-left: 0 !important;
    margin-right: auto !important;
    float: left !important;
    width: auto; /* Or set to 100% if you want it to fill the space */
}

/* Update this block in your current code */
.woocommerce div.product form.cart .variations td, 
.woocommerce div.product form.cart .variations th {
    border: 0;
    line-height: 2em;
    vertical-align: top;
    text-align: left !important; /* <--- ADD THIS LINE */
}
.woocommerce div.product form.cart .variations tr {
    display: flex !important;
    flex-direction: column !important; /* Stack label above dropdown */
    align-items: flex-start !important; /* Align everything to the left */
}

.woocommerce div.product form.cart .variations td.value {
    width: 100% !important;
    text-align: left !important;
}

/*added 2026.2.16*/

/* Make the addon fields smaller and side-by-side if possible */
.wcpa_form_item {
    margin-bottom: 10px !important;
}

.wcpa_form_item label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    font-size: 0.9em;
}

.wcpa_form_item input {
    height: 35px !important; /* Slimmer input boxes */
}
/* added 2/23/26*/
/* 3/4 revisions*/
/* Reduce vertical gap between variation dropdowns */
.variations tr {
    display: block;
    margin-bottom: 5px !important; /* Adjust this number to get them closer or further */
}

.variations td {
    display: block;
    padding: 0 !important;
}

.variations label {
    margin-bottom: 2px !important;
    display: block;
}