/* Extra: Responsive order table scrolling */
.order-table-wrapper {
overflow-x: auto;
max-width: 100%;
}
#orderTable {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
/* Center add-to-cart button wrapper */
.add-to-cart-wrapper {
text-align: left; /* Aligns button with totals table left border */
margin-top: 8px; /* Optional: slight spacing from totals table */
}
/* --- Robust active tab styling (prod-safe) --- */
.tab-buttons button.is-active,
.tab-buttons a.is-active,
.tab-buttons [role="tab"].is-active,
.tab-buttons button[aria-selected="true"],
.tab-buttons a[aria-selected="true"],
.tab-buttons [role="tab"][aria-selected="true"] {
background-color: var(--color-boxes-selected) !important;
color: var(--color-text-for-selected-boxes) !important;
border-color: var(--color-boxes-border-selected) !important;
}
/* Maintain same look on hover/focus for active tab */
.tab-buttons button.is-active:hover,
.tab-buttons a.is-active:hover,
.tab-buttons [role="tab"].is-active:hover,
.tab-buttons button[aria-selected="true"]:hover,
.tab-buttons a[aria-selected="true"]:hover,
.tab-buttons [role="tab"][aria-selected="true"]:hover,
.tab-buttons button.is-active:focus,
.tab-buttons a.is-active:focus,
.tab-buttons [role="tab"].is-active:focus,
.tab-buttons button[aria-selected="true"]:focus,
.tab-buttons a[aria-selected="true"]:focus,
.tab-buttons [role="tab"][aria-selected="true"]:focus {
background-color: var(--color-boxes-selected) !important;
color: var(--color-text-for-selected-boxes) !important;
border-color: var(--color-boxes-border-selected) !important;
}
/* Desktop: make details panel scroll independently */
@media (min-width: 769px) {
.details-panel {
/* cap panel height to viewport, allow internal scroll */
max-height: calc(100vh - 140px); /* header + margins buffer; tweak if needed */
min-height: 0; /* override earlier 800px so cap can apply */
overflow-y: auto;
overscroll-behavior: contain; /* prevent page scroll chaining */
padding-right: 4px; /* small gutter next to scrollbar */
}
}