tags styled as buttons lose their text colour when
* the link has been visited because the link shield above sets color: inherit on
* :visited. These rules restore the correct text colour for each button variant.
*/
.boxcart-products a.boxcart-btn--primary:visited,
.boxcart-basket a.boxcart-btn--primary:visited,
.boxcart-checkout a.boxcart-btn--primary:visited,
.boxcart-account a.boxcart-btn--primary:visited,
.boxcart-order-confirmation a.boxcart-btn--primary:visited {
color: var(--boxcart-btn-primary-text, #ffffff);
}
.boxcart-products a.boxcart-btn--secondary:visited,
.boxcart-basket a.boxcart-btn--secondary:visited,
.boxcart-checkout a.boxcart-btn--secondary:visited,
.boxcart-account a.boxcart-btn--secondary:visited,
.boxcart-order-confirmation a.boxcart-btn--secondary:visited {
color: var(--boxcart-btn-secondary-text, var(--boxcart-frontend-text));
}
.boxcart-products a.boxcart-btn--outline:visited,
.boxcart-basket a.boxcart-btn--outline:visited,
.boxcart-checkout a.boxcart-btn--outline:visited,
.boxcart-account a.boxcart-btn--outline:visited,
.boxcart-order-confirmation a.boxcart-btn--outline:visited {
color: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary));
}
/*
* SECONDARY BUTTONS
* Used for: Cancel, View Basket, Continue Shopping, secondary actions
* Normal: Light background → Hover: Slightly darker
*/
.boxcart-products button.boxcart-btn--secondary,
.boxcart-products a.boxcart-btn--secondary,
.boxcart-basket button.boxcart-btn--secondary,
.boxcart-basket a.boxcart-btn--secondary,
.boxcart-checkout button.boxcart-btn--secondary,
.boxcart-checkout a.boxcart-btn--secondary,
.boxcart-account button.boxcart-btn--secondary,
.boxcart-account a.boxcart-btn--secondary,
.boxcart-sidecart button.boxcart-sidecart__btn--secondary,
.boxcart-sidecart a.boxcart-sidecart__btn--secondary,
.boxcart-slot-modal button.boxcart-btn--secondary,
.boxcart-order-modal button.boxcart-btn--secondary,
.boxcart-signup-modal button.boxcart-btn--secondary,
.boxcart-signup-modal a.boxcart-btn--secondary {
background-color: var(--boxcart-btn-secondary-bg, #ffffff);
background: var(--boxcart-btn-secondary-bg, #ffffff);
color: var(--boxcart-btn-secondary-text, var(--boxcart-frontend-text));
border: var(--boxcart-btn-secondary-border, 1px solid var(--boxcart-frontend-border));
}
.boxcart-products button.boxcart-btn--secondary:hover,
.boxcart-products button.boxcart-btn--secondary:focus,
.boxcart-products a.boxcart-btn--secondary:hover,
.boxcart-products a.boxcart-btn--secondary:focus,
.boxcart-basket button.boxcart-btn--secondary:hover,
.boxcart-basket button.boxcart-btn--secondary:focus,
.boxcart-basket a.boxcart-btn--secondary:hover,
.boxcart-basket a.boxcart-btn--secondary:focus,
.boxcart-checkout button.boxcart-btn--secondary:hover,
.boxcart-checkout button.boxcart-btn--secondary:focus,
.boxcart-checkout a.boxcart-btn--secondary:hover,
.boxcart-checkout a.boxcart-btn--secondary:focus,
.boxcart-account button.boxcart-btn--secondary:hover,
.boxcart-account button.boxcart-btn--secondary:focus,
.boxcart-account a.boxcart-btn--secondary:hover,
.boxcart-account a.boxcart-btn--secondary:focus,
.boxcart-sidecart button.boxcart-sidecart__btn--secondary:hover,
.boxcart-sidecart button.boxcart-sidecart__btn--secondary:focus,
.boxcart-sidecart a.boxcart-sidecart__btn--secondary:hover,
.boxcart-sidecart a.boxcart-sidecart__btn--secondary:focus,
.boxcart-slot-modal button.boxcart-btn--secondary:hover,
.boxcart-slot-modal button.boxcart-btn--secondary:focus,
.boxcart-order-modal button.boxcart-btn--secondary:hover,
.boxcart-order-modal button.boxcart-btn--secondary:focus,
.boxcart-signup-modal button.boxcart-btn--secondary:hover,
.boxcart-signup-modal button.boxcart-btn--secondary:focus,
.boxcart-signup-modal a.boxcart-btn--secondary:hover,
.boxcart-signup-modal a.boxcart-btn--secondary:focus {
background-color: var(--boxcart-btn-secondary-bg-hover, #f6f7f7);
background: var(--boxcart-btn-secondary-bg-hover, #f6f7f7);
color: var(--boxcart-btn-secondary-hover-text, var(--boxcart-btn-secondary-text, var(--boxcart-frontend-text)));
border: var(--boxcart-btn-secondary-hover-border, var(--boxcart-btn-secondary-border, 1px solid var(--boxcart-frontend-border)));
}
/*
* OUTLINE BUTTONS
* Used for: Alternative CTAs, less prominent actions
* Normal: Transparent with border → Hover: Primary background
*/
.boxcart-products button.boxcart-btn--outline,
.boxcart-products a.boxcart-btn--outline,
.boxcart-basket button.boxcart-btn--outline,
.boxcart-basket a.boxcart-btn--outline,
.boxcart-checkout button.boxcart-btn--outline,
.boxcart-checkout a.boxcart-btn--outline,
.boxcart-account button.boxcart-btn--outline,
.boxcart-account a.boxcart-btn--outline {
background-color: transparent;
background: transparent;
color: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary));
border: 1px solid var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary));
}
.boxcart-products button.boxcart-btn--outline:hover,
.boxcart-products button.boxcart-btn--outline:focus,
.boxcart-products a.boxcart-btn--outline:hover,
.boxcart-products a.boxcart-btn--outline:focus,
.boxcart-basket button.boxcart-btn--outline:hover,
.boxcart-basket button.boxcart-btn--outline:focus,
.boxcart-basket a.boxcart-btn--outline:hover,
.boxcart-basket a.boxcart-btn--outline:focus,
.boxcart-checkout button.boxcart-btn--outline:hover,
.boxcart-checkout button.boxcart-btn--outline:focus,
.boxcart-checkout a.boxcart-btn--outline:hover,
.boxcart-checkout a.boxcart-btn--outline:focus,
.boxcart-account button.boxcart-btn--outline:hover,
.boxcart-account button.boxcart-btn--outline:focus,
.boxcart-account a.boxcart-btn--outline:hover,
.boxcart-account a.boxcart-btn--outline:focus {
background-color: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary));
background: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary));
color: var(--boxcart-btn-primary-text, #ffffff);
border-color: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary));
}
/*
* DISABLED BUTTONS
* Used for: Out of Stock, Box Full, disabled states
* Consistent muted appearance, no hover effect
*/
.boxcart-products button.boxcart-btn:disabled,
.boxcart-products button.boxcart-product-card__btn:disabled,
.boxcart-products a.boxcart-btn:disabled,
.boxcart-basket button.boxcart-btn:disabled,
.boxcart-basket a.boxcart-btn:disabled,
.boxcart-checkout button.boxcart-btn:disabled,
.boxcart-checkout a.boxcart-btn:disabled,
.boxcart-account button.boxcart-btn:disabled,
.boxcart-account a.boxcart-btn:disabled,
.boxcart-sidecart button:disabled,
.boxcart-login-modal button.boxcart-btn:disabled,
.boxcart-slot-modal button.boxcart-btn:disabled {
background-color: var(--boxcart-btn-disabled-bg, #e5e5e5);
background: var(--boxcart-btn-disabled-bg, #e5e5e5);
color: var(--boxcart-btn-disabled-text, #999999);
border: var(--boxcart-btn-disabled-border, none);
cursor: not-allowed;
opacity: 1;
}
.boxcart-products button.boxcart-btn:disabled:hover,
.boxcart-products button.boxcart-btn:disabled:focus,
.boxcart-products button.boxcart-product-card__btn:disabled:hover,
.boxcart-products button.boxcart-product-card__btn:disabled:focus,
.boxcart-basket button.boxcart-btn:disabled:hover,
.boxcart-basket button.boxcart-btn:disabled:focus,
.boxcart-basket a.boxcart-btn:disabled:hover,
.boxcart-basket a.boxcart-btn:disabled:focus,
.boxcart-checkout button.boxcart-btn:disabled:hover,
.boxcart-checkout button.boxcart-btn:disabled:focus,
.boxcart-checkout a.boxcart-btn:disabled:hover,
.boxcart-checkout a.boxcart-btn:disabled:focus,
.boxcart-account button.boxcart-btn:disabled:hover,
.boxcart-account button.boxcart-btn:disabled:focus,
.boxcart-account a.boxcart-btn:disabled:hover,
.boxcart-account a.boxcart-btn:disabled:focus,
.boxcart-login-modal button.boxcart-btn:disabled:hover,
.boxcart-login-modal button.boxcart-btn:disabled:focus,
.boxcart-slot-modal button.boxcart-btn:disabled:hover,
.boxcart-slot-modal button.boxcart-btn:disabled:focus {
background-color: var(--boxcart-btn-disabled-bg, #e5e5e5);
background: var(--boxcart-btn-disabled-bg, #e5e5e5);
color: var(--boxcart-btn-disabled-text, #999999);
border: var(--boxcart-btn-disabled-border, none);
cursor: not-allowed;
}
/* END BUTTONS SECTION */
/* Reset form inputs within BoxCart */
.boxcart-products input,
.boxcart-products select,
.boxcart-products textarea,
.boxcart-basket input,
.boxcart-basket select,
.boxcart-basket textarea,
.boxcart-checkout input,
.boxcart-checkout select,
.boxcart-checkout textarea,
.boxcart-account input,
.boxcart-account select,
.boxcart-account textarea,
.boxcart-sidecart input,
.boxcart-sidecart select {
font-family: inherit;
font-size: inherit;
}
/* Prevent Elementor and other page builders from overriding BoxCart spacing */
/* Note: Only reset margin on layout containers, not on internal elements that need spacing */
.elementor-widget-container > .boxcart-products,
.elementor-widget-container > .boxcart-basket,
.elementor-widget-container > .boxcart-checkout,
.elementor-widget-container > .boxcart-account,
.elementor > .boxcart-products,
.elementor > .boxcart-basket,
.elementor > .boxcart-checkout,
.elementor > .boxcart-account {
margin: 0;
}
/* Ensure BoxCart components maintain their spacing within page builders */
.elementor-widget-container .boxcart-products,
.elementor-widget-container .boxcart-basket,
.elementor-widget-container .boxcart-checkout,
.elementor-widget-container .boxcart-account,
.fl-builder .boxcart-products,
.fl-builder .boxcart-basket,
.fl-builder .boxcart-checkout,
.fl-builder .boxcart-account,
.et-db .boxcart-products,
.et-db .boxcart-basket,
.et-db .boxcart-checkout,
.et-db .boxcart-account {
width: 100%;
max-width: 100%;
}
/* Override page builder grid/flex containers that might affect BoxCart layouts */
/* Using double wrapper specificity: page-builder + boxcart-wrapper + element */
.elementor-widget-container .boxcart-products .boxcart-products__grid,
.fl-builder .boxcart-products .boxcart-products__grid,
.et-db .boxcart-products .boxcart-products__grid {
display: grid;
gap: 24px;
}
/* Ensure product cards maintain proper spacing */
.elementor-widget-container .boxcart-products .boxcart-product-card,
.fl-builder .boxcart-products .boxcart-product-card,
.et-db .boxcart-products .boxcart-product-card {
margin: 0;
}
/* Ensure proper margin between filters and grid */
.elementor-widget-container .boxcart-products .boxcart-products__filters,
.fl-builder .boxcart-products .boxcart-products__filters,
.et-db .boxcart-products .boxcart-products__filters {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 24px;
}
.elementor-widget-container .boxcart-products .boxcart-products__pills,
.fl-builder .boxcart-products .boxcart-products__pills,
.et-db .boxcart-products .boxcart-products__pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px;
}
/* Slot bar (collection slot selector) spacing in page builders */
.elementor-widget-container .boxcart-products .boxcart-slot-bar,
.fl-builder .boxcart-products .boxcart-slot-bar,
.et-db .boxcart-products .boxcart-slot-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
margin-bottom: 24px;
background: var(--boxcart-frontend-background);
border: 1px solid var(--boxcart-frontend-primary);
border-radius: var(--boxcart-frontend-radius);
}
/* ==========================================================================
Basket & Checkout - Core Layout Enforcement
These rules use !important to ensure BoxCart layouts work regardless of
theme or page builder (Elementor, Beaver Builder, Divi, etc.)
========================================================================== */
/* Basket container */
.boxcart-basket {
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Basket header */
.boxcart-basket .boxcart-basket__header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-direction: row !important;
margin-bottom: 24px !important;
padding-bottom: 16px !important;
border-bottom: 1px solid var(--boxcart-frontend-border) !important;
}
/* Basket items container */
.boxcart-basket .boxcart-basket__items {
display: block !important;
margin-bottom: 24px !important;
}
/* Basket item row - CRITICAL: Enforce grid layout */
.boxcart-basket .boxcart-basket__item {
display: grid !important;
grid-template-columns: 60px 1fr auto auto auto !important;
gap: 16px !important;
align-items: center !important;
padding: 16px 0 !important;
border-bottom: 1px solid var(--boxcart-frontend-border) !important;
flex-wrap: nowrap !important;
}
/* Basket item image - matches table view style */
.boxcart-basket .boxcart-basket__item-image {
width: 60px !important;
height: 60px !important;
min-width: 60px !important;
max-width: 60px !important;
border-radius: var(--boxcart-frontend-radius-md) !important;
overflow: hidden !important;
flex-shrink: 0 !important;
border: 1px solid var(--boxcart-frontend-border) !important;
background: var(--boxcart-frontend-background-alt) !important;
}
/* Basket item info */
.boxcart-basket .boxcart-basket__item-info {
min-width: 0 !important;
flex: 1 !important;
}
/* Basket item quantity */
.boxcart-basket .boxcart-basket__item-quantity {
flex-shrink: 0 !important;
}
/* Basket item total */
.boxcart-basket .boxcart-basket__item-total {
text-align: right !important;
min-width: 70px !important;
flex-shrink: 0 !important;
}
/* Basket item remove */
.boxcart-basket .boxcart-basket__item-remove {
flex-shrink: 0 !important;
}
/* Basket summary */
.boxcart-basket .boxcart-basket__summary {
display: block !important;
background: var(--boxcart-frontend-background-alt) !important;
border-radius: var(--boxcart-frontend-radius) !important;
padding: 24px !important;
}
/* Basket summary row */
.boxcart-basket .boxcart-basket__summary-row {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
flex-direction: row !important;
margin-bottom: 20px !important;
}
/* Basket actions */
.boxcart-basket .boxcart-basket__actions {
display: flex !important;
gap: 12px !important;
flex-direction: row !important;
}
/* Basket action buttons */
.boxcart-basket .boxcart-basket__actions .boxcart-btn {
flex: 1 !important;
}
/* Basket empty state — no display rule here; JS sets display: flex when showing */
.boxcart-basket .boxcart-basket__empty {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
padding: 64px 24px !important;
max-width: 400px !important;
margin: 0 auto !important;
}
/* Ensure empty & content states are mutually exclusive */
.boxcart-basket--has-items .boxcart-basket__empty {
display: none !important;
}
.boxcart-basket--empty .boxcart-basket__content {
display: none !important;
}
/* Checkout container */
.boxcart-checkout {
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Checkout wrapper - CRITICAL: Enforce grid layout */
.boxcart-checkout .boxcart-checkout__wrapper {
display: grid !important;
grid-template-columns: 1fr 340px !important;
gap: 24px !important;
align-items: start !important;
}
/* Checkout main column */
.boxcart-checkout .boxcart-checkout__main {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
min-width: 0 !important;
}
/* Checkout sidebar */
.boxcart-checkout .boxcart-checkout__sidebar {
min-width: 0 !important;
align-self: start !important;
}
/* Checkout sections */
.boxcart-checkout .boxcart-checkout__section {
display: block !important;
background: var(--boxcart-frontend-background) !important;
border: 1px solid var(--boxcart-frontend-border) !important;
border-radius: var(--boxcart-frontend-radius-lg) !important;
box-shadow: var(--boxcart-frontend-shadow) !important;
padding: 20px !important;
}
/* Form row with half-width fields */
.boxcart-checkout .boxcart-checkout__form-row--half {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 16px !important;
}
/* Form field */
.boxcart-checkout .boxcart-form-field {
display: block !important;
margin-bottom: 16px !important;
}
/* Order summary */
.boxcart-checkout .boxcart-checkout__order-summary {
display: block !important;
background: var(--boxcart-frontend-background) !important;
border: 1px solid var(--boxcart-frontend-border) !important;
border-radius: var(--boxcart-frontend-radius-lg) !important;
box-shadow: var(--boxcart-frontend-shadow) !important;
padding: 20px !important;
}
/* Checkout items list */
.boxcart-checkout .boxcart-checkout__item {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
flex-direction: row !important;
gap: 12px !important;
padding: 8px 0 !important;
border-bottom: 1px solid var(--boxcart-frontend-background-page) !important;
}
/* Date selector buttons */
.boxcart-checkout .boxcart-checkout__dates {
display: flex !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
/* Time slot buttons - ensure full width */
.boxcart-checkout .boxcart-checkout__slots-field {
width: 100% !important;
}
.boxcart-checkout .boxcart-checkout__slots {
width: 100% !important;
}
.boxcart-checkout .boxcart-checkout__slot-list {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
width: 100% !important;
}
.boxcart-checkout .boxcart-checkout__slot-list .boxcart-slot,
.boxcart-checkout .boxcart-checkout__slots .boxcart-slot {
width: 100% !important;
}
/* Empty checkout state */
.boxcart-checkout--empty .boxcart-checkout__empty-message {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
padding: 64px 24px !important;
max-width: 400px !important;
margin: 0 auto !important;
}
/* Mobile responsive */
@media (max-width: 768px) {
.boxcart-checkout .boxcart-checkout__wrapper {
grid-template-columns: 1fr !important;
}
.boxcart-checkout .boxcart-checkout__form-row--half {
grid-template-columns: 1fr !important;
}
.boxcart-basket .boxcart-basket__item {
grid-template-columns: 50px minmax(0, 1fr) auto !important;
grid-template-rows: auto auto auto !important;
gap: 4px 12px !important;
}
.boxcart-basket .boxcart-basket__item-image {
width: 50px !important;
height: 50px !important;
min-width: 50px !important;
max-width: 50px !important;
grid-row: 1 / -1 !important;
align-self: start !important;
}
.boxcart-basket .boxcart-basket__item-info {
grid-column: 2 !important;
grid-row: 1 !important;
}
.boxcart-basket .boxcart-basket__item-quantity {
grid-column: 2 / -1 !important;
grid-row: 2 !important;
}
.boxcart-basket .boxcart-quantity-selector {
width: auto !important;
}
.boxcart-basket .boxcart-basket__item-total {
grid-column: 2 / -1 !important;
grid-row: 3 !important;
text-align: left !important;
min-width: 0 !important;
}
.boxcart-basket .boxcart-basket__item-remove {
grid-column: 3 !important;
grid-row: 1 !important;
justify-self: end !important;
}
.boxcart-basket .boxcart-basket__actions {
flex-direction: column !important;
}
}
/* Ensure search input maintains proper styling */
.elementor-widget-container .boxcart-products .boxcart-products__search,
.fl-builder .boxcart-products .boxcart-products__search,
.et-db .boxcart-products .boxcart-products__search {
flex: 1 1 auto;
position: relative;
min-width: 250px;
}
.elementor-widget-container .boxcart-products input.boxcart-products__search-input,
.fl-builder .boxcart-products input.boxcart-products__search-input,
.et-db .boxcart-products input.boxcart-products__search-input {
width: 100%;
padding: 12px 16px 12px 44px;
border: 1px solid var(--boxcart-frontend-border-light);
border-radius: var(--boxcart-frontend-radius-sm);
}
/* Category dropdown in page builders */
.elementor-widget-container .boxcart-products .boxcart-products__filter-category,
.fl-builder .boxcart-products .boxcart-products__filter-category,
.et-db .boxcart-products .boxcart-products__filter-category {
flex: 0 0 auto;
min-width: 180px;
}
/* Prevent themes from collapsing padding on card content */
.boxcart-products .boxcart-product-card .boxcart-product-card__content {
padding: 16px;
}
/* Ensure card name and price have proper margins */
.boxcart-products .boxcart-product-card .boxcart-product-card__name {
margin: 0 0 4px 0;
}
.boxcart-products .boxcart-product-card .boxcart-product-card__price {
margin: 0 0 12px 0;
}
/* Ensure all BoxCart buttons resist theme overrides for all states */
.boxcart-products a.boxcart-btn,
.boxcart-basket a.boxcart-btn,
.boxcart-checkout a.boxcart-btn,
.boxcart-account a.boxcart-btn,
.boxcart-order-confirmation a.boxcart-btn {
text-decoration: none;
}
.boxcart-products a.boxcart-btn:hover,
.boxcart-basket a.boxcart-btn:hover,
.boxcart-checkout a.boxcart-btn:hover,
.boxcart-account a.boxcart-btn:hover,
.boxcart-order-confirmation a.boxcart-btn:hover {
text-decoration: none;
}
/* ==========================================================================
Screen Reader Only
========================================================================== */
.boxcart-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
Products Container
========================================================================== */
.boxcart-products {
width: 100% !important;
max-width: 100% !important;
position: relative;
box-sizing: border-box !important;
container-type: inline-size;
container-name: boxcart-products;
}
/* ==========================================================================
Filters Bar
========================================================================== */
.boxcart-products__filters {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 24px;
align-items: center;
}
.boxcart-products__filter-category {
flex: 0 0 auto;
min-width: 180px;
}
/* Category dropdown in filters bar - match view toggle height */
.boxcart-products__filter-category .boxcart-select,
.boxcart-products__filter-category .boxcart-category-filter {
padding: 12px 36px 12px 16px;
font-size: 15px;
height: 53px;
border-color: var(--boxcart-frontend-border-light);
border-radius: var(--boxcart-frontend-radius-sm);
box-sizing: border-box;
}
.boxcart-products__search {
flex: 1 1 auto;
position: relative;
min-width: 250px;
}
.boxcart-products__search-input {
width: 100%;
border: 1px solid var(--boxcart-frontend-border-light);
border-radius: var(--boxcart-frontend-radius-sm);
font-size: 15px;
color: var(--boxcart-frontend-text);
background: var(--boxcart-frontend-background);
transition: border-color var(--boxcart-frontend-transition), box-shadow var(--boxcart-frontend-transition);
/* Theme isolation */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-sizing: border-box;
}
/* High specificity for search input - override theme styles */
.boxcart-products .boxcart-products__search input.boxcart-products__search-input,
.boxcart-products .boxcart-products__search input[type="search"].boxcart-products__search-input {
width: 100%;
height: 53px;
padding: 12px 16px 12px 44px;
border: 1px solid var(--boxcart-frontend-border-light);
border-radius: var(--boxcart-frontend-radius-sm);
font-size: 15px;
color: var(--boxcart-frontend-text);
background: var(--boxcart-frontend-background);
transition: border-color var(--boxcart-frontend-transition);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-sizing: border-box;
box-shadow: none;
outline: none;
cursor: text;
}
.boxcart-products .boxcart-products__search input.boxcart-products__search-input:focus,
.boxcart-products .boxcart-products__search input[type="search"].boxcart-products__search-input:focus {
outline: none;
border-color: var(--boxcart-frontend-primary);
box-shadow: none;
}
.boxcart-products .boxcart-products__search input.boxcart-products__search-input::placeholder,
.boxcart-products .boxcart-products__search input[type="search"].boxcart-products__search-input::placeholder {
color: var(--boxcart-frontend-text-muted);
}
.boxcart-products__search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--boxcart-frontend-text-muted);
pointer-events: none;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.boxcart-products__search-icon svg {
display: block;
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* ==========================================================================
Category Pills
========================================================================== */
.boxcart-products__pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px;
}
.boxcart-pill {
display: inline-flex;
align-items: center;
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
color: var(--boxcart-frontend-text-light);
background: var(--boxcart-frontend-background);
border: 1px solid var(--boxcart-frontend-border-light);
border-radius: var(--boxcart-frontend-radius-full);
cursor: pointer;
text-decoration: none;
transition: all var(--boxcart-frontend-transition);
/* Theme isolation - ensure pills display correctly */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: inherit;
line-height: 1.4;
}
/* Pill states - wrapper specificity to override theme styles */
.boxcart-products .boxcart-products__pills button.boxcart-pill:hover {
border-color: var(--boxcart-frontend-primary);
color: var(--boxcart-frontend-primary);
background: var(--boxcart-frontend-background);
}
.boxcart-products .boxcart-products__pills button.boxcart-pill:focus,
.boxcart-products .boxcart-products__pills button.boxcart-pill:focus-visible {
outline: none;
border-color: var(--boxcart-frontend-primary);
box-shadow: 0 0 0 2px var(--boxcart-frontend-primary-light);
background: var(--boxcart-frontend-background);
color: var(--boxcart-frontend-primary);
}
.boxcart-products .boxcart-products__pills button.boxcart-pill:active {
outline: none;
background: var(--boxcart-frontend-primary-light);
border-color: var(--boxcart-frontend-primary);
color: var(--boxcart-frontend-primary);
box-shadow: none;
}
.boxcart-products .boxcart-products__pills button.boxcart-pill--active {
background: var(--boxcart-frontend-primary);
border-color: var(--boxcart-frontend-primary);
color: #fff;
}
.boxcart-products .boxcart-products__pills button.boxcart-pill--active:hover {
background: var(--boxcart-frontend-primary-hover);
border-color: var(--boxcart-frontend-primary-hover);
color: #fff;
}
.boxcart-products .boxcart-products__pills button.boxcart-pill--active:focus,
.boxcart-products .boxcart-products__pills button.boxcart-pill--active:focus-visible {
outline: none;
background: var(--boxcart-frontend-primary);
border-color: var(--boxcart-frontend-primary);
box-shadow: 0 0 0 2px var(--boxcart-frontend-primary-light);
color: #fff;
}
.boxcart-products .boxcart-products__pills button.boxcart-pill--active:active {
background: var(--boxcart-frontend-primary-hover);
border-color: var(--boxcart-frontend-primary-hover);
color: #fff;
box-shadow: none;
}
/* ==========================================================================
Products Grid
========================================================================== */
.boxcart-products__grid {
display: grid;
gap: 24px;
overflow: hidden;
transition: opacity var(--boxcart-frontend-transition);
}
.boxcart-products__grid--cols-1 {
grid-template-columns: 1fr;
}
.boxcart-products__grid--cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.boxcart-products__grid--cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.boxcart-products__grid--cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* ==========================================================================
Product Card - Matches mockup exactly
========================================================================== */
.boxcart-product-card {
background: var(--boxcart-frontend-background);
border: 1px solid var(--boxcart-frontend-border);
border-radius: var(--boxcart-frontend-radius-lg);
overflow: visible;
min-width: 0;
transition: box-shadow var(--boxcart-frontend-transition), transform var(--boxcart-frontend-transition);
display: flex;
flex-direction: column;
height: 100%;
}
.boxcart-product-card:hover {
box-shadow: var(--boxcart-frontend-shadow-hover);
transform: translateY(-2px);
}
.boxcart-product-card--in-basket {
border-color: var(--boxcart-frontend-primary);
}
.boxcart-product-card--in-basket .boxcart-qty-selector {
background: var(--boxcart-qty-in-basket-bg, #f0fdf4);
border: 1px solid var(--boxcart-qty-in-basket-border, transparent);
border-radius: 0 0 var(--boxcart-qty-in-basket-radius, var(--boxcart-frontend-radius)) var(--boxcart-qty-in-basket-radius, var(--boxcart-frontend-radius));
margin: 0 -16px -16px;
padding: 8px 16px 16px;
}
.boxcart-product-card--out-of-stock {
opacity: 1;
}
.boxcart-product-card--out-of-stock .boxcart-product-card__image img {
opacity: 0.5;
}
/* Out of stock card content - greyed out */
.boxcart-product-card--out-of-stock .boxcart-product-card__content {
opacity: 0.6;
}
.boxcart-product-card--out-of-stock .boxcart-qty-tabs--disabled .boxcart-qty-tab,
.boxcart-product-card--out-of-stock .boxcart-qty-panels--disabled .boxcart-step-selector,
.boxcart-product-card--out-of-stock .boxcart-qty-panels--disabled .boxcart-standard-selector {
pointer-events: none;
cursor: not-allowed;
}
.boxcart-product-card--out-of-stock .boxcart-qty-tab:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.boxcart-product-card--out-of-stock .boxcart-product-card__btn--out-of-stock {
background: var(--boxcart-btn-disabled-bg, var(--boxcart-frontend-border));
border: var(--boxcart-btn-disabled-border, none);
color: var(--boxcart-btn-disabled-text, var(--boxcart-frontend-text-muted));
font-weight: var(--boxcart-btn-font-weight, 600);
cursor: not-allowed;
}
/* Card Image */
.boxcart-product-card__image {
position: relative;
aspect-ratio: 1;
overflow: hidden;
background: var(--boxcart-frontend-background-alt);
border-radius: var(--boxcart-frontend-radius-lg) var(--boxcart-frontend-radius-lg) 0 0;
}
/* Card Image Placeholder - matches table view style */
.boxcart-product-card__image--placeholder {
display: flex;
align-items: center;
justify-content: center;
color: var(--boxcart-frontend-text-muted);
}
.boxcart-product-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--boxcart-frontend-transition-normal);
}
.boxcart-product-card:hover .boxcart-product-card__image img {
transform: scale(1.05);
}
/* Card Badge */
.boxcart-product-card__badge {
position: absolute;
top: 12px;
left: 12px;
padding: 4px 12px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.025em;
border-radius: var(--boxcart-frontend-radius-sm);
background: var(--boxcart-frontend-error);
color: #fff;
}
.boxcart-product-card__badge--out-of-stock {
background: var(--boxcart-frontend-error);
color: #fff;
}
/* Card Content */
.boxcart-product-card__content {
padding: 16px;
display: flex;
flex-direction: column;
flex: 1;
}
/* Controls wrapper - pushed to bottom of card */
.boxcart-product-card__controls {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.boxcart-product-card__name {
font-size: 16px;
font-weight: 600;
color: var(--boxcart-frontend-text-dark);
margin: 0 0 4px 0;
line-height: 1.3;
}
.boxcart-product-card__price {
font-size: 18px;
font-weight: 700;
color: var(--boxcart-frontend-primary);
margin-bottom: 12px;
}
/* Card Button - matches mockup */
.boxcart-product-card__btn {
width: 100%;
padding: 12px;
border: none;
border-radius: var(--boxcart-btn-radius, var(--boxcart-frontend-radius-sm));
font-size: 15px;
font-weight: var(--boxcart-btn-font-weight, 600);
cursor: pointer;
transition: all var(--boxcart-frontend-transition);
background: var(--boxcart-frontend-border);
color: var(--boxcart-frontend-text-muted);
}
/* Button within controls wrapper has no extra margin (gap handles spacing) */
.boxcart-product-card__controls .boxcart-product-card__btn,
.boxcart-product-card__controls .boxcart-add-btn,
.boxcart-product-card__controls .boxcart-add-to-basket-qty {
margin-top: 0;
}
/* Product card button styles now handled in consolidated BUTTONS section above */
/* ==========================================================================
Quantity Selector
========================================================================== */
/* Container - supports both BEM and legacy naming */
.boxcart-quantity,
.boxcart-quantity-selector {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* Quantity buttons - consolidated styles */
.boxcart-quantity__btn,
.boxcart-quantity-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
background: var(--boxcart-qty-button-bg, #f3f4f6);
border: 1px solid var(--boxcart-qty-button-border, var(--boxcart-frontend-border-light));
border-radius: var(--boxcart-qty-button-radius, var(--boxcart-frontend-radius-sm));
color: var(--boxcart-qty-button-text, #374151);
font-size: 18px;
font-weight: 500;
cursor: pointer;
transition: all var(--boxcart-frontend-transition);
line-height: 1;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.boxcart-quantity__btn:hover:not(:disabled),
.boxcart-quantity-btn:hover:not(:disabled) {
background: var(--boxcart-qty-button-hover-bg, #e5e7eb);
border-color: var(--boxcart-frontend-primary);
color: var(--boxcart-qty-button-text, #374151);
}
.boxcart-quantity__btn:focus,
.boxcart-quantity__btn:focus-visible,
.boxcart-quantity-btn:focus,
.boxcart-quantity-btn:focus-visible {
border-color: var(--boxcart-frontend-primary);
outline: none;
box-shadow: none;
color: var(--boxcart-qty-button-text, #374151);
}
/* Quantity button focus - wrapper specificity for outline removal */
.boxcart-products button.boxcart-quantity__btn:focus,
.boxcart-products button.boxcart-quantity__btn:focus-visible,
.boxcart-products button.boxcart-quantity-btn:focus,
.boxcart-products button.boxcart-quantity-btn:focus-visible,
.boxcart-sidecart button.boxcart-quantity__btn:focus,
.boxcart-sidecart button.boxcart-quantity__btn:focus-visible,
.boxcart-basket button.boxcart-quantity__btn:focus,
.boxcart-basket button.boxcart-quantity__btn:focus-visible {
outline: none;
}
.boxcart-quantity__btn:active:not(:disabled),
.boxcart-quantity-btn:active:not(:disabled) {
background: var(--boxcart-qty-button-hover-bg, #e5e7eb);
border-color: var(--boxcart-frontend-primary);
color: var(--boxcart-qty-button-text, #374151);
box-shadow: none;
}
/* Quantity button active - wrapper specificity for outline removal */
.boxcart-products button.boxcart-quantity__btn:active,
.boxcart-products button.boxcart-quantity-btn:active,
.boxcart-sidecart button.boxcart-quantity__btn:active,
.boxcart-basket button.boxcart-quantity__btn:active {
outline: none;
}
.boxcart-quantity__btn:disabled,
.boxcart-quantity-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
color: var(--boxcart-frontend-text-muted);
background: var(--boxcart-frontend-background);
border-color: var(--boxcart-qty-button-border, var(--boxcart-frontend-border-light));
}
/* SVG icon support for legacy buttons */
.boxcart-quantity-btn svg {
display: block;
width: 12px;
height: 12px;
flex-shrink: 0;
}
.boxcart-quantity-btn svg path {
stroke: currentColor;
}
/* Quantity value display - consolidated */
.boxcart-quantity__value,
.boxcart-quantity-value {
display: flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
font-size: 14px;
font-weight: 600;
color: var(--boxcart-qty-value-text, var(--boxcart-frontend-text));
text-align: center;
border: 1px solid var(--boxcart-qty-button-border, var(--boxcart-frontend-border-light));
border-radius: var(--boxcart-qty-button-radius, var(--boxcart-frontend-radius-sm));
background: var(--boxcart-frontend-background);
}
/* Basket qty selector consistent width for alignment */
.boxcart-basket .boxcart-quantity-selector {
width: 200px;
}
.boxcart-basket .boxcart-quantity-value {
flex: 1;
}
input.boxcart-quantity-value {
padding: 0;
outline: none;
min-width: 0;
}
/* ==========================================================================
Empty State - Products Grid
========================================================================== */
/* Legacy simple empty state - kept for backwards compatibility */
.boxcart-products__empty {
grid-column: 1 / -1;
text-align: center;
padding: 48px 24px;
color: var(--boxcart-frontend-text-muted);
}
/* ==========================================================================
Pagination & Load More
========================================================================== */
.boxcart-products__pagination {
display: flex;
justify-content: center;
margin-top: 32px;
}
.boxcart-load-more {
text-align: center;
margin-top: 32px;
}
.boxcart-load-more__btn {
padding: 12px 32px;
border: 2px solid var(--boxcart-frontend-primary);
border-radius: var(--boxcart-btn-radius, var(--boxcart-frontend-radius-sm));
background: var(--boxcart-frontend-background);
color: var(--boxcart-frontend-primary);
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all var(--boxcart-frontend-transition);
}
.boxcart-load-more__btn:hover {
background: var(--boxcart-frontend-primary);
color: #fff;
}
.boxcart-load-more__btn:focus {
outline: none;
box-shadow: 0 0 0 2px var(--boxcart-frontend-primary-light);
}
.boxcart-load-more__btn:active {
outline: none;
background: var(--boxcart-frontend-primary-hover);
color: #fff;
box-shadow: none;
}
.boxcart-load-more__info {
margin-top: 12px;
font-size: 13px;
color: var(--boxcart-frontend-text-muted);
}
/* ==========================================================================
Loading State
========================================================================== */
.boxcart-products__loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.boxcart-spinner {
width: 32px;
height: 32px;
border: 3px solid var(--boxcart-frontend-border);
border-top-color: var(--boxcart-frontend-primary);
border-radius: 50%;
animation: boxcart-spin 0.8s linear infinite;
}
@keyframes boxcart-spin {
to {
transform: rotate(360deg);
}
}
/* ==========================================================================
Form Elements
========================================================================== */
.boxcart-input,
.boxcart-select {
width: 100%;
padding: 8px 12px;
font-size: 14px;
line-height: 1.5;
color: var(--boxcart-frontend-text);
background: var(--boxcart-frontend-background);
border: 1px solid var(--boxcart-frontend-border);
border-radius: var(--boxcart-frontend-radius);
transition: border-color var(--boxcart-frontend-transition), box-shadow var(--boxcart-frontend-transition);
}
.boxcart-input:focus,
.boxcart-select:focus {
outline: none;
border-color: var(--boxcart-frontend-primary);
box-shadow: none;
}
.boxcart-input::placeholder {
color: var(--boxcart-frontend-text-muted);
}
.boxcart-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23787C82' d='M2.5 4.5L6 8L9.5 4.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
/* ==========================================================================
Buttons
========================================================================== */
.boxcart-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 16px;
font-size: 15px;
font-weight: var(--boxcart-btn-font-weight, 600);
line-height: 1.5;
text-decoration: none;
border: none;
border-radius: var(--boxcart-btn-radius, var(--boxcart-frontend-radius-sm));
cursor: pointer;
transition: all var(--boxcart-frontend-transition);
}
.boxcart-btn--full {
width: 100%;
}
/* Primary, secondary, outline, and disabled button styles now handled
in consolidated BUTTONS section at top of file */
.boxcart-btn--loading {
opacity: 0.7;
pointer-events: none;
}
.boxcart-btn__icon {
flex-shrink: 0;
}
/* ==========================================================================
Notices
========================================================================== */
.boxcart-notices {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999999;
display: flex;
flex-direction: column;
gap: 8px;
}
.boxcart-notice {
padding: 12px 16px;
border-radius: var(--boxcart-frontend-radius);
font-size: 14px;
font-weight: 500;
box-shadow: var(--boxcart-frontend-shadow-hover);
animation: boxcart-slide-in 0.3s ease;
}
.boxcart-notice--success {
background: var(--boxcart-frontend-success-accent-light);
color: var(--boxcart-frontend-success-accent);
}
.boxcart-notice--error {
background: var(--boxcart-frontend-error-light);
color: var(--boxcart-frontend-error);
}
.boxcart-notice--warning {
background: var(--boxcart-frontend-warning-light);
color: var(--boxcart-frontend-warning);
}
.boxcart-notice--info {
background: var(--boxcart-frontend-info-light);
color: var(--boxcart-frontend-info);
}
.boxcart-notice--fade-out {
animation: boxcart-fade-out 0.3s ease forwards;
}
@keyframes boxcart-slide-in {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes boxcart-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* ==========================================================================
Mini Basket
========================================================================== */
.boxcart-mini-basket {
display: inline-flex;
align-items: center;
}
/* Main link styled as green pill button per mockup */
.boxcart-mini-basket__link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--boxcart-mini-basket-bg, var(--boxcart-frontend-primary));
color: var(--boxcart-mini-basket-text, #fff);
border-radius: var(--boxcart-frontend-radius-full);
text-decoration: none;
font-weight: 500;
font-size: 14px;
transition: background-color var(--boxcart-frontend-transition);
}
.boxcart-mini-basket__link:hover {
background: var(--boxcart-mini-basket-hover-bg, var(--boxcart-frontend-primary-hover));
color: var(--boxcart-mini-basket-text, #fff);
}
.boxcart-mini-basket__link:focus {
outline: none;
box-shadow: 0 0 0 2px var(--boxcart-frontend-primary-light);
}
.boxcart-mini-basket__icon {
display: flex;
align-items: center;
justify-content: center;
}
.boxcart-mini-basket__icon svg {
width: 18px;
height: 18px;
}
/* For icon-count style, show count as simple text */
.boxcart-mini-basket--icon-count .boxcart-mini-basket__count {
font-size: 14px;
font-weight: 500;
}
/* Remove badge-style count for pill button style */
.boxcart-mini-basket__count {
display: none;
}
.boxcart-mini-basket__count--empty {
display: none;
}
.boxcart-mini-basket__text {
font-size: 14px;
font-weight: 500;
}
/* Mini basket style variations */
.boxcart-mini-basket--icon-count .boxcart-mini-basket__link {
gap: 8px;
}
.boxcart-mini-basket--icon-count .boxcart-mini-basket__count {
display: inline;
}
.boxcart-mini-basket--text-only .boxcart-mini-basket__link {
gap: 0;
}
/* ==========================================================================
Basket Page
========================================================================== */
.boxcart-basket {
width: 100%;
position: relative;
}
.boxcart-basket__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--boxcart-frontend-border);
}
.boxcart-basket__title {
font-size: 24px;
font-weight: 600;
color: var(--boxcart-frontend-text);
margin: 0;
}
/* ==========================================================================
Empty State - Unified Design
Used across basket, checkout, products pages
========================================================================== */
/* Container wrapper styling with border */
.boxcart-basket,
.boxcart-checkout--empty,
.boxcart-checkout--login-required {
border: 1px solid var(--boxcart-frontend-border);
border-radius: var(--boxcart-frontend-radius-lg);
background: var(--boxcart-frontend-background);
padding: 24px;
}
/* Inner empty state content */
.boxcart-empty-state,
.boxcart-basket__empty,
.boxcart-checkout__empty-message,
.boxcart-checkout__login-message {
text-align: center;
padding: 40px 0;
max-width: 400px;
margin: 0 auto;
}
/* Login required state */
.boxcart-checkout__login-icon {
color: var(--boxcart-frontend-text-muted);
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.boxcart-checkout__login-icon svg {
width: 64px;
height: 64px;
}
.boxcart-checkout__login-title {
font-size: 22px;
font-weight: 600;
margin: 0 0 12px;
color: var(--boxcart-frontend-text-dark);
}
.boxcart-checkout__login-text {
font-size: 15px;
color: var(--boxcart-frontend-text-muted);
margin: 0 0 24px;
line-height: 1.5;
}
.boxcart-empty-state__icon,
.boxcart-basket__empty-icon,
.boxcart-checkout__empty-icon,
.boxcart-products__empty-icon {
color: var(--boxcart-frontend-text-muted);
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.boxcart-empty-state__icon svg,
.boxcart-basket__empty-icon svg,
.boxcart-checkout__empty-icon svg,
.boxcart-products__empty-icon svg {
width: 64px;
height: 64px;
}
.boxcart-empty-state__title,
.boxcart-basket__empty-title,
.boxcart-checkout__empty-title,
.boxcart-products__empty-title {
font-size: 20px;
font-weight: 600;
color: var(--boxcart-frontend-text);
margin: 0 0 8px 0;
}
.boxcart-empty-state__text,
.boxcart-basket__empty-text,
.boxcart-checkout__empty-text,
.boxcart-products__empty-text {
font-size: 14px;
color: var(--boxcart-frontend-text-muted);
margin: 0;
}
/* Empty state buttons - consistent sizing using specific selectors */
.boxcart-basket__empty .boxcart-btn,
.boxcart-checkout__empty-message .boxcart-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
font-size: 15px;
font-weight: var(--boxcart-btn-font-weight, 600);
line-height: 1.5;
border-radius: var(--boxcart-btn-radius, var(--boxcart-frontend-radius-sm));
text-decoration: none;
min-height: auto;
height: auto;
border: none;
/* Add margin-top to ensure spacing from text even when wpautop wraps button in tag */
margin-top: 24px;
}
/* Hide any stray br tags inserted by WordPress wpautop inside buttons */
.boxcart-basket__empty .boxcart-btn br,
.boxcart-checkout__empty-message .boxcart-btn br {
display: none;
}
.boxcart-basket__empty .boxcart-btn--primary,
.boxcart-checkout__empty-message .boxcart-btn--primary {
background: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary));
color: var(--boxcart-btn-primary-text, #ffffff);
}
.boxcart-basket__empty .boxcart-btn--primary:hover,
.boxcart-checkout__empty-message .boxcart-btn--primary:hover {
background: var(--boxcart-btn-primary-bg-hover, var(--boxcart-frontend-primary-hover));
}
/* ==========================================================================
Unified Empty State Container
A single element that displays empty state messages for products,
favourites, search results, etc. Controlled by JavaScript.
========================================================================== */
.boxcart-products__empty {
display: none; /* Hidden by default, shown via JavaScript */
border: 1px solid var(--boxcart-frontend-border);
border-radius: var(--boxcart-frontend-radius-lg);
background: var(--boxcart-frontend-background);
margin-top: var(--boxcart-frontend-spacing-lg);
text-align: center;
padding: 64px 24px;
}
.boxcart-products__empty .boxcart-products__empty-icon {
color: var(--boxcart-frontend-text-muted);
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.boxcart-products__empty .boxcart-products__empty-icon svg {
width: 64px;
height: 64px;
}
.boxcart-products__empty .boxcart-products__empty-icon img {
width: 64px;
height: 64px;
object-fit: contain;
}
.boxcart-products__empty .boxcart-products__empty-title {
font-size: 20px;
font-weight: 600;
color: var(--boxcart-frontend-text);
margin: 0 0 8px 0;
}
.boxcart-products__empty .boxcart-products__empty-text {
font-size: 14px;
color: var(--boxcart-frontend-text-muted);
margin: 0;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
/* Basket Items */
.boxcart-basket__items {
margin-bottom: 24px;
}
.boxcart-basket__item {
display: grid;
grid-template-columns: 60px 1fr auto auto auto;
gap: 16px;
align-items: center;
padding: 16px 0;
border-bottom: 1px solid var(--boxcart-frontend-border);
}
.boxcart-basket__item:first-child {
padding-top: 0;
}
.boxcart-basket__item-image {
width: 60px;
height: 60px;
border-radius: var(--boxcart-frontend-radius-md);
overflow: hidden;
background: var(--boxcart-frontend-background-alt);
flex-shrink: 0;
border: 1px solid var(--boxcart-frontend-border);
}
.boxcart-basket__item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Placeholder image style for basket (matches table view) */
.boxcart-basket__item-image--placeholder {
display: flex;
align-items: center;
justify-content: center;
color: var(--boxcart-frontend-text-muted);
}
.boxcart-basket__item-info {
min-width: 0;
}
.boxcart-basket__item-name {
font-size: 14px;
font-weight: 600;
color: var(--boxcart-frontend-text);
margin: 0 0 4px 0;
line-height: 1.3;
}
.boxcart-basket__item-price {
font-size: 13px;
color: var(--boxcart-frontend-text-muted);
margin: 0;
}
.boxcart-basket__item-unit {
font-size: 12px;
}
.boxcart-basket__item-quantity {
flex-shrink: 0;
}
.boxcart-basket__item-total {
text-align: right;
min-width: 70px;
}
.boxcart-basket__item-total-value {
font-size: 14px;
font-weight: 600;
color: var(--boxcart-frontend-text);
}
.boxcart-basket__item-remove {
flex-shrink: 0;
}
.boxcart-basket__remove-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: none;
border-radius: var(--boxcart-frontend-radius);
color: var(--boxcart-frontend-text-muted);
cursor: pointer;
transition: all var(--boxcart-frontend-transition);
}
.boxcart-basket__remove-btn:hover {
background: var(--boxcart-frontend-primary-light);
color: var(--boxcart-frontend-primary);
}
.boxcart-basket__remove-btn:focus {
outline: none;
box-shadow: 0 0 0 2px var(--boxcart-frontend-primary-light);
}
/* Basket Summary */
.boxcart-basket__summary {
background: var(--boxcart-frontend-background-alt);
border-radius: var(--boxcart-frontend-radius);
padding: 24px;
}
.boxcart-basket__summary-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.boxcart-basket__summary-label {
font-size: 14px;
color: var(--boxcart-frontend-text-light);
}
.boxcart-basket__summary-value {
font-size: 18px;
font-weight: 700;
color: var(--boxcart-frontend-text);
}
.boxcart-basket__actions {
display: flex;
gap: 12px;
}
.boxcart-basket__actions .boxcart-btn {
flex: 1;
}
/* Basket Loading */
.boxcart-basket__loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.8);
z-index: 10;
}
/* Text Button Style */
.boxcart-btn--text {
background: transparent;
border: none;
color: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary));
padding: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: color var(--boxcart-frontend-transition);
}
.boxcart-btn--text:hover {
color: var(--boxcart-btn-primary-bg-hover, var(--boxcart-frontend-primary-hover));
}
/* Text button in basket - higher specificity to override theme styles */
.boxcart-basket button.boxcart-btn--text,
.boxcart-basket button.boxcart-btn--text:hover,
.boxcart-basket button.boxcart-btn--text:focus,
.boxcart-basket button.boxcart-btn--text:active {
background: transparent !important;
border: none !important;
color: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary)) !important;
}
.boxcart-basket button.boxcart-btn--text:hover {
color: var(--boxcart-btn-primary-bg-hover, var(--boxcart-frontend-primary-hover)) !important;
}
/* ==========================================================================
Responsive
========================================================================== */
/*
* Progressive column reduction based on container width.
* Uses container queries so the grid adapts to the actual available space
* regardless of sidecart width, viewport size, or admin column setting.
*
* Breakpoints ensure cards stay ≥220px wide (accounting for 24px gap):
* 4 cols needs ~950px | 3 cols needs ~710px | 2 cols needs ~460px
*/
/* Step 1: 4 → 3, 3 → 2 when container is under ~960px */
@container boxcart-products (max-width: 960px) {
.boxcart-products__grid--cols-4 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.boxcart-products__grid--cols-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Step 2: Cap at 2 columns when container is under ~720px */
@container boxcart-products (max-width: 720px) {
.boxcart-products__grid--cols-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
/* Basket responsive */
.boxcart-basket__item {
grid-template-columns: 50px minmax(0, 1fr) auto;
grid-template-rows: auto auto auto;
gap: 4px 12px;
}
.boxcart-basket__item-image {
width: 50px;
height: 50px;
grid-row: 1 / -1;
align-self: start;
}
.boxcart-basket__item-info {
grid-column: 2;
grid-row: 1;
}
.boxcart-basket__item-quantity {
grid-column: 2 / -1;
grid-row: 2;
}
.boxcart-basket .boxcart-quantity-selector {
width: auto;
}
.boxcart-basket__item-total {
grid-column: 2 / -1;
grid-row: 3;
text-align: left;
min-width: 0;
}
.boxcart-basket__item-remove {
grid-column: 3;
grid-row: 1;
justify-self: end;
}
.boxcart-basket__summary {
padding: 16px;
}
.boxcart-basket__actions {
flex-direction: column;
}
}
/* Products container query — responds to container width (not viewport),
so the grid adapts when the sidecart pushes the content area narrower. */
@container boxcart-products (max-width: 600px) {
/* Hide category dropdown on small container - pills handle filtering */
.boxcart-products__filter-category {
display: none;
}
/* Search and view toggle on same row */
.boxcart-products__filters {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
}
.boxcart-products__search {
flex: 1;
min-width: 0;
max-width: none;
}
.boxcart-view-toggle {
flex-shrink: 0;
}
/* Category pills horizontal scroll */
.boxcart-products__pills {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
margin-left: -16px;
margin-right: -16px;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 4px;
}
.boxcart-products__pills::-webkit-scrollbar {
display: none;
}
.boxcart-products__pills .boxcart-pill {
flex-shrink: 0;
}
/* Mobile columns - default to 2 columns */
.boxcart-products__grid--cols-4,
.boxcart-products__grid--cols-3,
.boxcart-products__grid--cols-2,
.boxcart-products__grid--cols-1 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
/* Mobile 1 column override */
.boxcart-products__grid--mobile-cols-1.boxcart-products__grid--cols-4,
.boxcart-products__grid--mobile-cols-1.boxcart-products__grid--cols-3,
.boxcart-products__grid--mobile-cols-1.boxcart-products__grid--cols-2,
.boxcart-products__grid--mobile-cols-1.boxcart-products__grid--cols-1 {
grid-template-columns: 1fr;
}
.boxcart-product-card__content {
padding: 12px;
}
.boxcart-product-card__name {
font-size: 13px;
}
.boxcart-product-card__price {
font-size: 13px;
margin-bottom: 10px;
}
.boxcart-quantity-btn {
width: 32px;
height: 32px;
}
.boxcart-quantity-value {
min-width: 32px;
height: 32px;
}
}
/* Non-product elements still use viewport-based media query */
@media (max-width: 600px) {
.boxcart-notices {
bottom: 16px;
right: 16px;
left: 16px;
}
.boxcart-notice {
text-align: center;
}
/* Basket header responsive */
.boxcart-basket__header {
flex-wrap: wrap;
gap: 12px;
}
.boxcart-basket__title {
font-size: 20px;
}
}
/* ==========================================================================
Checkout Page
========================================================================== */
.boxcart-checkout {
width: 100%;
max-width: 100%;
position: relative;
/* Note: no overflow:hidden - needed for tooltips. Width controlled by grid. */
}
.boxcart-checkout__title {
font-size: 24px;
font-weight: 700;
color: var(--boxcart-frontend-text-dark);
margin: 0 0 24px 0;
}
.boxcart-checkout__notices {
margin-bottom: 24px;
}
.boxcart-checkout__slot-expired-notice {
margin-bottom: 20px;
animation: none;
box-shadow: none;
border: 1px solid var(--boxcart-frontend-warning-border);
}
.boxcart-checkout__slot-expired-notice .boxcart-notice__icon {
margin-right: 6px;
}
/* Checkout Auth Prompt */
.boxcart-checkout__auth-prompt {
background: var(--boxcart-frontend-background-alt);
border: 1px solid var(--boxcart-frontend-border);
border-radius: var(--boxcart-frontend-radius);
padding: 16px 20px;
margin-bottom: 24px;
}
.boxcart-checkout__auth-links {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.boxcart-checkout__auth-text {
color: var(--boxcart-frontend-text-light);
font-size: 14px;
}
.boxcart-checkout__auth-toggle {
color: var(--boxcart-frontend-primary);
font-weight: 500;
font-size: 14px;
}
.boxcart-checkout__auth-toggle:hover {
text-decoration: underline;
}
.boxcart-checkout__auth-separator {
color: var(--boxcart-frontend-text-muted);
font-size: 14px;
}
/* Checkout Auth Forms - Inline Login */
.boxcart-checkout__auth-form {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--boxcart-frontend-border);
}
.boxcart-checkout__login-row {
display: flex;
align-items: center;
gap: 12px;
}
.boxcart-checkout__login-field {
flex: 1;
min-width: 0;
}
.boxcart-checkout__login-field .boxcart-form-field__input {
padding: 12px !important;
font-size: 15px !important;
line-height: 1.5 !important;
border: 1px solid var(--boxcart-frontend-border) !important;
border-radius: var(--boxcart-frontend-radius-sm) !important;
background: var(--boxcart-frontend-background) !important;
box-sizing: border-box !important;
}
.boxcart-checkout__login-field .boxcart-form-field__input:focus {
outline: none !important;
border-color: var(--boxcart-frontend-primary) !important;
box-shadow: 0 0 0 3px var(--boxcart-frontend-primary-light) !important;
}
.boxcart-checkout__auth-form .boxcart-checkout__auth-submit {
padding: 12px 20px;
font-size: 15px;
line-height: 1.5;
white-space: nowrap;
flex-shrink: 0;
box-sizing: border-box;
}
.boxcart-checkout__auth-form-notice {
padding: 10px 12px;
border-radius: var(--boxcart-frontend-radius-sm);
font-size: 14px;
margin-bottom: 12px;
}
.boxcart-checkout__auth-form-notice--error {
background: var(--boxcart-frontend-error-light);
color: var(--boxcart-frontend-error);
border: 1px solid var(--boxcart-frontend-error-border);
}
.boxcart-checkout__auth-form-notice--success {
background: var(--boxcart-frontend-success-light);
color: var(--boxcart-frontend-success);
border: 1px solid var(--boxcart-frontend-success-border);
}
.boxcart-checkout__login-links {
margin-top: 12px;
text-align: right;
}
/* Checkout Auth Tabs */
.boxcart-checkout__auth-tabs {
display: flex;
border-bottom: 1px solid var(--boxcart-frontend-border);
margin-bottom: 16px;
gap: 0;
}
.boxcart-checkout__auth-tab {
position: relative;
flex: 1;
padding: 12px 16px;
font-size: 14px;
font-weight: 500;
color: var(--boxcart-frontend-text-muted);
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease;
outline: none;
text-align: center;
}
.boxcart-checkout__auth-tab:hover,
.boxcart-checkout__auth-tab:focus {
color: var(--boxcart-frontend-primary);
background: none;
outline: none;
}
.boxcart-checkout__auth-tab--active,
.boxcart-checkout__auth-tab--active:hover,
.boxcart-checkout__auth-tab--active:focus {
color: var(--boxcart-frontend-primary);
border-bottom-color: var(--boxcart-frontend-primary);
background: none;
}
/* Checkout register form fields */
.boxcart-checkout__register-fields {
display: flex;
flex-direction: column;
gap: 12px;
}
.boxcart-checkout__register-fields .boxcart-form-field__label {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--boxcart-frontend-text);
margin-bottom: 4px;
}
.boxcart-checkout__register-fields .boxcart-form-field__input {
padding: 12px !important;
font-size: 15px !important;
line-height: 1.5 !important;
}
.boxcart-checkout__register-fields .boxcart-form-field__hint {
font-size: 12px;
color: var(--boxcart-frontend-text-muted);
margin-top: 4px;
}
/* Password reset inline form matches login form spacing */
.boxcart-checkout__auth-form--reset {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--boxcart-frontend-border);
}
.boxcart-checkout__auth-form--reset .boxcart-checkout__login-field .boxcart-form-field__input {
padding: 12px !important;
font-size: 15px !important;
line-height: 1.5 !important;
}
.boxcart-checkout__lost-password {
font-size: 13px;
color: var(--boxcart-frontend-text-muted);
text-decoration: none;
transition: color 0.2s ease;
}
.boxcart-checkout__lost-password:hover,
.boxcart-checkout__lost-password:focus {
color: var(--boxcart-frontend-primary);
text-decoration: underline;
}
/* Password Reset Form (Checkout) */
.boxcart-checkout__reset-form {
margin-top: 16px;
padding: 16px;
background: var(--boxcart-frontend-background-alt);
border: 1px solid var(--boxcart-frontend-border);
border-radius: var(--boxcart-frontend-radius-sm);
}
/* Reset form intro paragraphs - override display:contents */
.boxcart-checkout__reset-intro,
p.boxcart-checkout__reset-intro {
display: block !important;
margin: 0 0 12px !important;
padding: 0 !important;
font-size: 14px;
color: var(--boxcart-frontend-text-light);
line-height: 1.5;
}
.boxcart-checkout__code-sent-message,
p.boxcart-checkout__code-sent-message {
display: block !important;
margin: 0 0 12px !important;
padding: 0 !important;
font-size: 14px;
color: var(--boxcart-frontend-text-light);
line-height: 1.5;
}
.boxcart-checkout__reset-step {
display: block;
}
.boxcart-checkout__reset-form .boxcart-form-field {
margin-bottom: 12px;
}
.boxcart-checkout__reset-form .boxcart-form-field__label {
font-size: 13px;
font-weight: 500;
color: var(--boxcart-frontend-text);
margin-bottom: 4px;
}
.boxcart-checkout__reset-form .boxcart-form-field__input {
width: 100%;
padding: 10px 12px;
font-size: 14px;
border: 1px solid var(--boxcart-frontend-border);
border-radius: var(--boxcart-frontend-radius-sm);
background: var(--boxcart-frontend-background);
color: var(--boxcart-frontend-text);
}
.boxcart-checkout__reset-form .boxcart-form-field__input:focus {
outline: none;
border-color: var(--boxcart-frontend-primary);
box-shadow: 0 0 0 2px var(--boxcart-frontend-primary-transparent);
}
.boxcart-checkout__reset-actions {
display: flex;
gap: 10px;
align-items: center;
margin-top: 12px;
}
.boxcart-checkout__reset-form .boxcart-btn {
padding: 10px 16px;
font-size: 14px;
}
.boxcart-checkout__reset-back {
font-size: 13px;
color: var(--boxcart-frontend-text-muted);
text-decoration: none;
background: none;
border: none;
padding: 0;
cursor: pointer;
transition: color 0.2s ease;
}
.boxcart-checkout__reset-back:hover {
color: var(--boxcart-frontend-primary);
text-decoration: underline;
}
.boxcart-checkout__reset-back:focus-visible {
outline: 2px solid var(--boxcart-frontend-primary);
outline-offset: 2px;
border-radius: 2px;
}
.boxcart-checkout__reset-email-display {
color: var(--boxcart-frontend-text);
font-weight: 500;
}
.boxcart-checkout__reset-notice {
padding: 10px 12px;
border-radius: var(--boxcart-frontend-radius-sm);
font-size: 14px;
margin-bottom: 12px;
}
.boxcart-checkout__reset-notice--error {
background: var(--boxcart-frontend-error-light);
color: var(--boxcart-frontend-error);
border: 1px solid var(--boxcart-frontend-error);
}
.boxcart-checkout__reset-notice--success {
background: var(--boxcart-frontend-success-light);
color: var(--boxcart-frontend-success);
border: 1px solid var(--boxcart-frontend-success);
}
/* Stacked login row for password fields */
.boxcart-checkout__login-row--stacked {
flex-direction: column;
gap: 12px;
}
.boxcart-checkout__login-row--stacked .boxcart-checkout__login-field {
flex: 1 1 100%;
}
/* Code sent message */
.boxcart-checkout__code-sent-message {
margin: 0 0 12px;
font-size: 14px;
color: var(--boxcart-frontend-text-light);
line-height: 1.5;
}
/* Code input styling */
.boxcart-form-field__input--code {
text-align: center;
letter-spacing: 8px;
font-size: 20px;
font-weight: 600;
padding: 12px;
}
/* Full-width button */
.boxcart-btn--full {
width: 100%;
margin-top: 12px;
}
/* Responsive: Stack login form on mobile */
@media (max-width: 600px) {
.boxcart-checkout__login-row {
flex-wrap: wrap;
}
.boxcart-checkout__login-field {
flex: 1 1 100%;
}
.boxcart-checkout__auth-form .boxcart-checkout__auth-submit {
flex: 1;
}
.boxcart-checkout__login-links {
text-align: center;
}
/* Send Code button full width on mobile */
.boxcart-checkout__send-reset-code,
.boxcart-checkout__verify-code {
width: 100%;
flex: 1 1 100%;
}
}
/* Create Account Option */
.boxcart-checkout__create-account {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--boxcart-frontend-background-page);
}
.boxcart-checkout__create-account .boxcart-form-field__checkbox-label {
display: flex;
align-items: center;
gap: 8px;
}
.boxcart-checkout__create-account .boxcart-form-field__checkbox-label span {
position: relative;
top: 1px;
}
.boxcart-checkout__create-account-info,
.boxcart-checkout__create-account-info:hover,
.boxcart-checkout__create-account-info:focus,
.boxcart-checkout__create-account-info:active {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0;
background: none !important;
border: none !important;
color: var(--boxcart-frontend-text-muted) !important;
cursor: pointer;
transition: color var(--boxcart-frontend-transition);
position: relative;
top: 1px;
text-decoration: none !important;
}
.boxcart-checkout__create-account-info:hover {
color: var(--boxcart-frontend-primary) !important;
}
.boxcart-checkout__create-account-info svg {
width: 14px;
height: 14px;
}
.boxcart-checkout__create-account-password {
margin-top: 16px;
}
.boxcart-checkout__create-account-password .boxcart-checkout__form-row--half {
margin-bottom: 0;
}
/* ==========================================================================
Popup Component
========================================================================== */
.boxcart-popup {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.boxcart-popup__overlay {
position: absolute;
inset: 0;
background: var(--boxcart-modal-overlay-bg, rgba(0, 0, 0, 0.5));
}
.boxcart-popup__content {
position: relative;
background: var(--boxcart-frontend-background);
border-radius: var(--boxcart-frontend-radius-lg);
box-shadow: var(--boxcart-modal-shadow, 0 20px 60px rgba(0, 0, 0, 0.2));
max-width: 400px;
width: 100%;
max-height: 80vh;
overflow-y: auto;
z-index: 1;
}
.boxcart-popup__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--boxcart-frontend-border);
}
.boxcart-popup__title {
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--boxcart-frontend-text-dark);
}
.boxcart-popup__close {
width: 32px;
height: 32px;
padding: 0;
background: none;
border: none;
border-radius: var(--boxcart-frontend-radius-sm);
color: var(--boxcart-frontend-text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--boxcart-frontend-transition);
}
.boxcart-popup__close:hover {
background: var(--boxcart-frontend-background-alt);
color: var(--boxcart-frontend-text);
}
.boxcart-popup__close svg {
width: 20px;
height: 20px;
}
.boxcart-popup__body {
padding: 20px;
}
.boxcart-popup__list {
margin: 0;
padding: 0 0 0 20px;
list-style: disc;
}
.boxcart-popup__list li {
padding: 6px 0;
color: var(--boxcart-frontend-text);
font-size: 14px;
line-height: 1.5;
}
.boxcart-popup__list li:first-child {
padding-top: 0;
}
.boxcart-popup__list li:last-child {
padding-bottom: 0;
}
.boxcart-checkout__wrapper {
display: grid;
grid-template-columns: 1fr 340px;
gap: 24px;
align-items: start;
}
.boxcart-checkout__main {
display: flex;
flex-direction: column;
gap: 20px;
min-width: 0; /* Prevent grid column from expanding */
overflow: visible; /* Allow tooltips to show - was hidden but clips tooltips */
}
.boxcart-checkout__section {
background: var(--boxcart-frontend-background);
border: 1px solid var(--boxcart-frontend-border);
border-radius: var(--boxcart-frontend-radius-lg);
box-shadow: var(--boxcart-frontend-shadow);
padding: 20px;
/* Note: no overflow:hidden here - needed for date tooltips to display */
}
.boxcart-checkout__section-title {
font-size: 18px;
font-weight: 600;
color: var(--boxcart-frontend-text-dark);
margin: 0 0 20px 0;
padding: 0 0 16px 0;
border-bottom: 1px solid var(--boxcart-frontend-background-page);
}
/* Fulfilment Method Options */
.boxcart-checkout__fulfilment-options {
display: flex;
gap: 16px;
}
.boxcart-checkout__fulfilment-option {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: var(--boxcart-frontend-background);
border: 2px solid var(--boxcart-frontend-border);
border-radius: var(--boxcart-frontend-radius-lg);
cursor: pointer;
transition: all 0.2s ease;
}
.boxcart-checkout__fulfilment-option:hover {
border-color: var(--boxcart-frontend-primary-light);
}
.boxcart-checkout__fulfilment-option--selected {
border-color: var(--boxcart-frontend-primary);
background: var(--boxcart-frontend-primary-lighter);
}
.boxcart-checkout__fulfilment-option input[type="radio"] {
display: none;
}
.boxcart-checkout__fulfilment-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: var(--boxcart-frontend-background-page);
border-radius: var(--boxcart-frontend-radius);
color: var(--boxcart-frontend-text-muted);
flex-shrink: 0;
}
.boxcart-checkout__fulfilment-option--selected .boxcart-checkout__fulfilment-icon {
background: var(--boxcart-frontend-primary);
color: #fff;
}
.boxcart-checkout__fulfilment-label {
display: flex;
flex-direction: column;
gap: 2px;
}
.boxcart-checkout__fulfilment-title {
font-size: 16px;
font-weight: 600;
color: var(--boxcart-frontend-text-dark);
display: flex;
align-items: center;
gap: 8px;
}
.boxcart-checkout__fulfilment-fee {
font-size: 13px;
font-weight: 500;
padding: 2px 8px;
border-radius: var(--boxcart-frontend-radius-sm);
background: var(--boxcart-frontend-background-page);
color: var(--boxcart-frontend-text-muted);
}
.boxcart-checkout__fulfilment-fee--free {
background: var(--boxcart-frontend-success-light);
color: var(--boxcart-frontend-success);
}
.boxcart-checkout__fulfilment-desc {
font-size: 13px;
color: var(--boxcart-frontend-text-muted);
}
/* Checkout Summary Subtotal */
.boxcart-checkout__subtotal {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
font-size: 14px;
color: var(--boxcart-frontend-text);
}
/* Checkout Empty State - uses unified empty state CSS above, just add text-align */
.boxcart-checkout--empty {
text-align: center;
}
/* Honeypot Spam Protection - hidden from humans, visible to bots */
.boxcart-hp-field {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
/* Form Fields */
.boxcart-form-field {
margin-bottom: 16px;
}
.boxcart-form-field:last-child {
margin-bottom: 0;
}
.boxcart-form-field__label {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--boxcart-frontend-text-light);
margin-bottom: 4px;
}
.boxcart-form-field__label .required {
color: var(--boxcart-frontend-error);
}
.boxcart-form-field__input {
width: 100%;
max-width: 100%;
padding: 12px;
font-size: 15px;
line-height: 1.5;
color: var(--boxcart-frontend-text);
background: var(--boxcart-frontend-background);
border: 1px solid var(--boxcart-frontend-border);
border-radius: var(--boxcart-frontend-radius-sm);
transition: border-color var(--boxcart-frontend-transition), box-shadow var(--boxcart-frontend-transition);
box-sizing: border-box;
}
/* Form field input wrapper specificity - override theme styles */
.boxcart-checkout .boxcart-form-field input.boxcart-form-field__input,
.boxcart-checkout .boxcart-form-field textarea.boxcart-form-field__input,
.boxcart-checkout .boxcart-form-field select.boxcart-form-field__input,
.boxcart-account .boxcart-form-field input.boxcart-form-field__input,
.boxcart-account .boxcart-form-field textarea.boxcart-form-field__input,
.boxcart-account .boxcart-form-field select.boxcart-form-field__input,
.boxcart-login-modal .boxcart-form-field input.boxcart-form-field__input,
.boxcart-login-modal .boxcart-form-field textarea.boxcart-form-field__input,
.boxcart-login-modal .boxcart-form-field select.boxcart-form-field__input {
width: 100%;
max-width: 100%;
padding: 12px;
font-size: 15px;
line-height: 1.5;
color: var(--boxcart-frontend-text);
background: var(--boxcart-frontend-background);
border: 1px solid var(--boxcart-frontend-border);
border-radius: var(--boxcart-frontend-radius-sm);
box-sizing: border-box;
}
/* Ensure select elements don't overflow - wrapper specificity */
.boxcart-checkout .boxcart-form-field select.boxcart-form-field__input,
.boxcart-account .boxcart-form-field select.boxcart-form-field__input {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23787C82' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
.boxcart-form-field__input::placeholder {
color: var(--boxcart-frontend-text-muted);
}
/* Form field focus - wrapper specificity */
.boxcart-checkout .boxcart-form-field .boxcart-form-field__input:focus,
.boxcart-account .boxcart-form-field .boxcart-form-field__input:focus,
.boxcart-login-modal .boxcart-form-field .boxcart-form-field__input:focus {
outline: none;
border-color: var(--boxcart-frontend-primary);
box-shadow: 0 0 0 3px var(--boxcart-frontend-primary-light);
}
/* Form field error - wrapper specificity */
.boxcart-checkout .boxcart-form-field .boxcart-form-field__input--error,
.boxcart-account .boxcart-form-field .boxcart-form-field__input--error,
.boxcart-login-modal .boxcart-form-field .boxcart-form-field__input--error {
border-color: var(--boxcart-frontend-error);
}
/* Form field error focus - wrapper specificity */
.boxcart-checkout .boxcart-form-field .boxcart-form-field__input--error:focus,
.boxcart-account .boxcart-form-field .boxcart-form-field__input--error:focus,
.boxcart-login-modal .boxcart-form-field .boxcart-form-field__input--error:focus {
box-shadow: 0 0 0 3px var(--boxcart-frontend-error-light);
}
.boxcart-form-field__textarea {
resize: vertical;
min-height: 80px;
}
.boxcart-form-field__error {
display: block;
font-size: 12px;
color: var(--boxcart-frontend-error);
margin-top: 4px;
}
.boxcart-checkout__form-row--half {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* Billing Address Section */
.boxcart-checkout__billing-address {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--boxcart-frontend-background-page);
}
.boxcart-checkout__subsection-title {
font-size: 15px;
font-weight: 600;
color: var(--boxcart-frontend-text-dark);
margin: 0 0 16px 0;
}
/* Checkbox Field */
.boxcart-form-field--checkbox {
margin-bottom: 20px;
}
.boxcart-checkbox,
.boxcart-form-field__checkbox-label {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
font-size: 13px;
color: var(--boxcart-frontend-text-light);
}
.boxcart-checkbox input[type="checkbox"],
.boxcart-form-field__checkbox-label input[type="checkbox"] {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 2px;
accent-color: var(--boxcart-frontend-primary);
}
.boxcart-checkbox a,
.boxcart-form-field__checkbox-label a {
color: var(--boxcart-frontend-primary);
text-decoration: none;
}
.boxcart-checkbox a:hover,
.boxcart-form-field__checkbox-label a:hover {
text-decoration: underline;
color: var(--boxcart-frontend-primary-hover);
}
/* Location Details */
.boxcart-checkout__location-details {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px;
background: var(--boxcart-frontend-background-alt);
border-radius: var(--boxcart-frontend-radius);
margin-top: 12px;
margin-bottom: 20px;
}
.boxcart-checkout__location-name {
font-size: 15px;
font-weight: 600;
color: var(--boxcart-frontend-text-dark);
margin-bottom: 4px;
}
.boxcart-checkout__location-address {
font-size: 14px;
color: var(--boxcart-frontend-text);
line-height: 1.4;
}
.boxcart-checkout__location-instructions {
font-size: 14px;
color: var(--boxcart-frontend-text);
font-style: italic;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--boxcart-frontend-border);
}
.boxcart-checkout__location-instructions::before {
content: '"';
}
.boxcart-checkout__location-instructions .instructions-text::after {
content: '"';
}
/* Date Buttons */
.boxcart-checkout__dates {
margin-top: 12px;
position: relative;
overflow: visible; /* Allow tooltips to display outside */
}
/* Wrapper for horizontal scrolling dates - tooltips appear above */
.boxcart-checkout__dates-scroll-wrapper {
position: relative;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 12px; /* Space for scrollbar */
/* Firefox scrollbar */
scrollbar-width: thin;
scrollbar-color: var(--boxcart-frontend-primary) var(--boxcart-frontend-background-alt);
}
/* Styled scrollbar for wrapper */
.boxcart-checkout__dates-scroll-wrapper::-webkit-scrollbar {
height: 8px;
-webkit-appearance: none;
}
.boxcart-checkout__dates-scroll-wrapper::-webkit-scrollbar-track {
background: var(--boxcart-frontend-background-alt);
border-radius: 4px;
}
.boxcart-checkout__dates-scroll-wrapper::-webkit-scrollbar-thumb {
background: var(--boxcart-frontend-primary);
border-radius: 4px;
}
.boxcart-checkout__dates-scroll-wrapper::-webkit-scrollbar-thumb:hover {
background: var(--boxcart-frontend-primary-hover);
}
.boxcart-checkout__date-buttons {
display: flex;
gap: 12px;
padding: 4px;
max-width: max-content;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.boxcart-date-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-width: 72px;
padding: 12px 16px;
background: var(--boxcart-frontend-background);
border: 1px solid var(--boxcart-frontend-border-light);
border-radius: 8px;
cursor: pointer;
text-align: center;
transition: all var(--boxcart-frontend-transition);
scroll-snap-align: start;
outline: none;
outline-offset: 0;
box-shadow: none;
}
/* Date button wrapper specificity - ensure base styles override theme */
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn {
background: var(--boxcart-frontend-background);
border: 1px solid var(--boxcart-frontend-border-light);
border-radius: 8px;
outline: none;
box-shadow: none;
}
/* Hover state - wrapper specificity for AVAILABLE dates (not disabled) */
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn:not([disabled]):hover,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn:not([disabled]):hover {
border-color: var(--boxcart-frontend-primary);
background: var(--boxcart-frontend-primary);
background-color: var(--boxcart-frontend-primary);
color: #fff;
outline: none;
box-shadow: none;
}
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn:not([disabled]):hover .boxcart-date-btn__day,
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn:not([disabled]):hover .boxcart-date-btn__number,
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn:not([disabled]):hover .boxcart-date-btn__month,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn:not([disabled]):hover .boxcart-date-btn__day,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn:not([disabled]):hover .boxcart-date-btn__number,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn:not([disabled]):hover .boxcart-date-btn__month {
color: #fff;
}
/* Focus states - wrapper specificity for AVAILABLE dates (not disabled) */
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn:not([disabled]):focus,
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn:not([disabled]):focus-visible,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn:not([disabled]):focus,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn:not([disabled]):focus-visible {
outline: none;
outline-offset: 0;
border-color: var(--boxcart-frontend-primary);
background: var(--boxcart-frontend-primary);
background-color: var(--boxcart-frontend-primary);
color: #fff;
box-shadow: 0 0 0 3px var(--boxcart-frontend-primary-light);
}
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn:not([disabled]):focus .boxcart-date-btn__day,
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn:not([disabled]):focus .boxcart-date-btn__number,
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn:not([disabled]):focus .boxcart-date-btn__month,
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn:not([disabled]):focus-visible .boxcart-date-btn__day,
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn:not([disabled]):focus-visible .boxcart-date-btn__number,
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn:not([disabled]):focus-visible .boxcart-date-btn__month,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn:not([disabled]):focus .boxcart-date-btn__day,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn:not([disabled]):focus .boxcart-date-btn__number,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn:not([disabled]):focus .boxcart-date-btn__month,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn:not([disabled]):focus-visible .boxcart-date-btn__day,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn:not([disabled]):focus-visible .boxcart-date-btn__number,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn:not([disabled]):focus-visible .boxcart-date-btn__month {
color: #fff;
}
/* Selected state - wrapper specificity */
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn--selected,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn--selected {
border-color: var(--boxcart-frontend-primary);
background: var(--boxcart-frontend-primary);
background-color: var(--boxcart-frontend-primary);
color: #fff;
box-shadow: none;
}
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn--selected:hover,
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn--selected:focus,
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn--selected:focus-visible,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn--selected:hover,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn--selected:focus,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn--selected:focus-visible {
background: var(--boxcart-frontend-primary);
background-color: var(--boxcart-frontend-primary);
}
.boxcart-date-btn__day {
font-size: 11px;
font-weight: 600;
color: var(--boxcart-frontend-text-muted);
text-transform: uppercase;
}
/* Selected state child colors - wrapper specificity */
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn--selected .boxcart-date-btn__day,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn--selected .boxcart-date-btn__day {
color: rgba(255, 255, 255, 0.9);
}
.boxcart-date-btn__number {
font-size: 20px;
font-weight: 700;
color: var(--boxcart-frontend-text-dark);
line-height: 1.2;
}
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn--selected .boxcart-date-btn__number,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn--selected .boxcart-date-btn__number {
color: #fff;
}
.boxcart-date-btn__month {
font-size: 11px;
font-weight: 500;
color: var(--boxcart-frontend-text-muted);
}
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn--selected .boxcart-date-btn__month,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn--selected .boxcart-date-btn__month {
color: rgba(255, 255, 255, 0.9);
}
/* Disabled date button state - base */
.boxcart-date-btn--disabled,
.boxcart-date-btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
background: var(--boxcart-frontend-background-alt);
border-color: var(--boxcart-frontend-border-light);
}
/* Disabled date button state - wrapper specificity */
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn--disabled,
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn[disabled],
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn--disabled,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn[disabled] {
background: var(--boxcart-frontend-background-alt);
border-color: var(--boxcart-frontend-border-light);
}
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn--disabled:hover,
.boxcart-checkout .boxcart-checkout__dates button.boxcart-date-btn[disabled]:hover,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn--disabled:hover,
.boxcart-slot-modal .boxcart-date-selector button.boxcart-date-btn[disabled]:hover {
border-color: var(--boxcart-frontend-border-light);
background: var(--boxcart-frontend-background-alt);
box-shadow: none;
}
.boxcart-date-btn--disabled .boxcart-date-btn__day,
.boxcart-date-btn--disabled .boxcart-date-btn__number,
.boxcart-date-btn--disabled .boxcart-date-btn__month {
color: var(--boxcart-frontend-text-muted);
}
.boxcart-date-btn--disabled:hover .boxcart-date-btn__day,
.boxcart-date-btn--disabled:hover .boxcart-date-btn__number,
.boxcart-date-btn--disabled:hover .boxcart-date-btn__month {
color: var(--boxcart-frontend-text-muted);
}
/* Custom Tooltip for unavailable dates - matches button size exactly */
.boxcart-date-btn[data-tooltip] {
position: relative;
}
.boxcart-date-btn[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
background: var(--boxcart-frontend-text-dark);
color: #fff;
font-size: 11px;
font-weight: 500;
line-height: 1.3;
text-align: center;
white-space: normal;
word-wrap: break-word;
border-radius: 8px;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease, visibility 0.15s ease;
pointer-events: none;
z-index: 10;
}
.boxcart-date-btn[data-tooltip]:hover::after {
opacity: 1;
visibility: visible;
}
.boxcart-checkout__dates-loading,
.boxcart-checkout__slots-loading,
.boxcart-checkout__no-dates,
.boxcart-checkout__no-slots,
.boxcart-checkout__error {
font-size: 14px;
color: var(--boxcart-frontend-text-muted);
padding: 16px;
text-align: center;
background: var(--boxcart-frontend-background-alt);
border-radius: var(--boxcart-frontend-radius);
}
.boxcart-checkout__error {
background: var(--boxcart-frontend-error-light);
color: var(--boxcart-frontend-error);
}
/* Time Slots - ensure full width */
.boxcart-checkout__slots-field {
width: 100%;
}
.boxcart-checkout__slots {
margin-top: 12px;
width: 100%;
}
.boxcart-checkout__slot-list,
.boxcart-checkout__slot-buttons {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
transition: opacity 0.2s ease;
}
/* Ensure slots span full width in checkout */
.boxcart-checkout__slot-list .boxcart-slot,
.boxcart-checkout__slots .boxcart-slot {
width: 100%;
}
/* Fade transition for slot changes */
.boxcart-checkout__slot-list.is-loading,
.boxcart-checkout__slot-buttons.is-loading,
.boxcart-slots.is-loading {
opacity: 0.4;
pointer-events: none;
}
/* Smooth height transitions for slots container */
.boxcart-checkout__slots,
[data-slots-container] {
min-height: 100px;
}
.boxcart-slot {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
background: var(--boxcart-frontend-background);
border: 1px solid var(--boxcart-frontend-border-light);
border-radius: 6px;
cursor: pointer;
transition: all var(--boxcart-frontend-transition);
}
.boxcart-slot:hover:not(.boxcart-slot--disabled) {
border-color: var(--boxcart-frontend-primary);
}
.boxcart-slot--selected {
border-color: var(--boxcart-frontend-primary);
background: var(--boxcart-frontend-primary-light);
}
.boxcart-slot--disabled {
opacity: 0.5;
cursor: not-allowed;
background: var(--boxcart-frontend-background-alt);
}
.boxcart-slot--disabled:hover {
border-color: var(--boxcart-frontend-border-light);
}
.boxcart-slot__time {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 500;
color: var(--boxcart-frontend-text-dark);
}
.boxcart-slot__time input[type="radio"] {
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--boxcart-frontend-primary);
cursor: pointer;
}
.boxcart-slot--disabled .boxcart-slot__time input[type="radio"] {
cursor: not-allowed;
}
.boxcart-slot__availability {
font-size: 13px;
color: var(--boxcart-frontend-text-muted);
flex-shrink: 0;
}
.boxcart-slot__availability--low {
color: var(--boxcart-frontend-error);
font-weight: 500;
}
/* Legacy button-based slot styling (fallback) */
.boxcart-slot-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 12px 20px;
background: var(--boxcart-frontend-background);
border: 1px solid var(--boxcart-frontend-border-light);
border-radius: var(--boxcart-frontend-radius-sm);
cursor: pointer;
transition: all var(--boxcart-frontend-transition);
}
.boxcart-slot-btn:not([disabled]):hover {
border-color: var(--boxcart-frontend-primary);
}
.boxcart-slot-btn:focus {
outline: none;
border-color: var(--boxcart-frontend-primary);
box-shadow: 0 0 0 2px var(--boxcart-frontend-primary-light);
}
.boxcart-slot-btn--selected {
border-color: var(--boxcart-frontend-primary);
background: var(--boxcart-frontend-primary-light);
}
.boxcart-slot-btn--full,
.boxcart-slot-btn--past,
.boxcart-slot-btn--unavailable {
opacity: 0.5;
cursor: not-allowed;
background: var(--boxcart-frontend-background-alt);
}
.boxcart-slot-btn__time {
font-size: 14px;
font-weight: 600;
color: var(--boxcart-frontend-text);
}
.boxcart-slot-btn--selected .boxcart-slot-btn__time {
color: var(--boxcart-frontend-primary);
}
.boxcart-slot-btn__status {
font-size: 11px;
font-weight: 500;
color: var(--boxcart-frontend-text-muted);
}
.boxcart-slot-btn__status--limited {
color: var(--boxcart-frontend-error);
}
/* Submit Section (inside sidebar) */
.boxcart-checkout__submit-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--boxcart-frontend-background-page);
}
/* Terms & Conditions checkbox */
.boxcart-form-field--terms .boxcart-form-field__checkbox-label {
line-height: 1.6;
}
.boxcart-form-field--terms .boxcart-form-field__checkbox-label span {
line-height: 1.6;
}
/* Terms error state — tooltip-style inline message */
.boxcart-form-field--terms.boxcart-form-field--error .boxcart-form-field__error {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 6px 12px;
background: var(--boxcart-frontend-error-light);
border: 1px solid var(--boxcart-frontend-error-border);
border-radius: var(--boxcart-frontend-radius-sm);
color: var(--boxcart-frontend-error);
font-size: 13px;
font-weight: 500;
line-height: 1.4;
}
.boxcart-form-field--terms.boxcart-form-field--error .boxcart-form-field__error::before {
content: "\26A0";
font-size: 14px;
flex-shrink: 0;
}
/* Shake animation for terms field */
.boxcart-form-field--shake {
animation: boxcart-shake 0.4s ease;
}
@keyframes boxcart-shake {
0%, 100% { transform: translateX(0); }
15% { transform: translateX(-6px); }
30% { transform: translateX(5px); }
45% { transform: translateX(-4px); }
60% { transform: translateX(3px); }
75% { transform: translateX(-2px); }
}
.boxcart-checkout__submit {
width: 100%;
padding: 14px 24px;
font-size: 16px;
}
.boxcart-btn--large {
padding: 14px 32px;
font-size: 16px;
}
/* Order Summary Sidebar */
.boxcart-checkout__sidebar {
min-width: 0;
align-self: start;
}
.boxcart-checkout__order-summary {
position: relative;
background: var(--boxcart-frontend-background);
border: 1px solid var(--boxcart-frontend-border);
border-radius: var(--boxcart-frontend-radius-lg);
box-shadow: var(--boxcart-frontend-shadow);
padding: 20px;
overflow: hidden;
}
.boxcart-checkout__order-summary .boxcart-checkout__section-title {
margin: 0 0 16px 0;
padding: 0 0 12px 0;
border-bottom: 1px solid var(--boxcart-frontend-background-page);
}
.boxcart-checkout__items {
max-height: 250px;
overflow-y: auto;
margin-bottom: 16px;
padding-right: 8px;
}
.boxcart-checkout__item {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid var(--boxcart-frontend-background-page);
font-size: 13px;
}
.boxcart-checkout__item:last-child {
border-bottom: none;
}
.boxcart-checkout__item-details {
display: flex;
align-items: baseline;
gap: 6px;
flex: 1;
min-width: 0;
}
.boxcart-checkout__item-name {
flex: 1;
font-size: 13px;
color: var(--boxcart-frontend-text);
word-break: break-word;
}
.boxcart-checkout__item-qty {
font-size: 13px;
color: var(--boxcart-frontend-text-muted);
flex-shrink: 0;
white-space: nowrap;
}
.boxcart-checkout__item-unit {
font-size: 12px;
color: var(--boxcart-frontend-text-muted);
display: block;
}
.boxcart-checkout__item-total {
font-size: 13px;
font-weight: 500;
color: var(--boxcart-frontend-text-dark);
flex-shrink: 0;
}
.boxcart-checkout__summary-footer {
padding-top: 8px;
}
.boxcart-checkout__item-count {
display: flex;
justify-content: space-between;
font-size: 14px;
font-weight: 600;
color: var(--boxcart-frontend-text);
margin-bottom: 8px;
}
.boxcart-checkout__total {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--boxcart-frontend-background-page);
}
.boxcart-checkout__total-label {
font-size: 16px;
font-weight: 600;
color: var(--boxcart-frontend-text-dark);
}
.boxcart-checkout__total-value {
font-size: 18px;
font-weight: 700;
color: var(--boxcart-frontend-text-dark);
}
.boxcart-checkout__edit-basket {
position: absolute;
top: 18px;
right: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--boxcart-frontend-radius-sm, 4px);
color: var(--boxcart-frontend-text-muted);
text-decoration: none;
transition: color 0.15s ease, background-color 0.15s ease;
}
.boxcart-checkout__edit-basket:hover {
color: var(--boxcart-frontend-primary);
background-color: var(--boxcart-frontend-background-alt);
}
/* ==========================================================================
Order Confirmation Page
========================================================================== */
.boxcart-order-confirmation {
max-width: 100%;
margin: 0 auto;
padding: 24px 0;
}
.boxcart-order-confirmation__header {
text-align: center;
margin-bottom: 32px;
}
.boxcart-order-confirmation__icon {
color: var(--boxcart-frontend-success);
margin-bottom: 12px;
}
.boxcart-order-confirmation__icon .dashicons {
font-size: 64px;
width: 64px;
height: 64px;
}
.boxcart-order-confirmation__title {
font-size: 28px;
font-weight: 700;
color: var(--boxcart-frontend-text);
margin: 0 0 8px 0;
}
.boxcart-order-confirmation__order-number {
font-size: 16px;
color: var(--boxcart-frontend-text-muted);
margin: 0 0 12px 0;
}
.boxcart-order-confirmation__email-notice {
font-size: 14px;
color: var(--boxcart-frontend-text-light);
margin: 0;
}
.boxcart-order-confirmation__email-notice strong {
color: var(--boxcart-frontend-text);
}
.boxcart-order-confirmation__details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 24px;
}
.boxcart-order-confirmation__section {
background: var(--boxcart-frontend-background);
border: 1px solid var(--boxcart-frontend-border);
border-radius: var(--boxcart-frontend-radius);
padding: 20px;
}
.boxcart-order-confirmation__section-title {
font-size: 14px;
font-weight: 600;
color: var(--boxcart-frontend-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 16px 0;
padding-bottom: 12px;
border-bottom: 1px solid var(--boxcart-frontend-border);
}
.boxcart-order-confirmation__location {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 16px;
}
.boxcart-order-confirmation__location .dashicons {
color: var(--boxcart-frontend-primary);
flex-shrink: 0;
}
.boxcart-order-confirmation__location-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.boxcart-order-confirmation__location-info strong {
font-size: 15px;
color: var(--boxcart-frontend-text);
}
.boxcart-order-confirmation__location-info span {
font-size: 13px;
color: var(--boxcart-frontend-text-muted);
}
.boxcart-order-confirmation__datetime {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 16px;
}
.boxcart-order-confirmation__date,
.boxcart-order-confirmation__time {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--boxcart-frontend-primary-transparent);
border: 1px solid var(--boxcart-frontend-primary);
border-radius: var(--boxcart-frontend-radius);
}
/* Hide empty p tags added by wpautop */
.boxcart-order-confirmation__date > p:empty,
.boxcart-order-confirmation__time > p:empty,
.boxcart-order-confirmation__location > p:empty,
.boxcart-order-confirmation__section > p:empty,
.boxcart-order-confirmation__section-title > br {
display: none;
}
.boxcart-order-confirmation__date .dashicons,
.boxcart-order-confirmation__time .dashicons {
color: var(--boxcart-frontend-primary);
font-size: 24px;
width: 24px;
height: 24px;
flex-shrink: 0;
}
.boxcart-order-confirmation__datetime-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.boxcart-order-confirmation__datetime-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--boxcart-frontend-primary);
}
.boxcart-order-confirmation__datetime-value {
font-size: 15px;
font-weight: 600;
color: var(--boxcart-frontend-text);
}
.boxcart-order-confirmation__instructions {
margin-top: 16px;
padding: 12px;
background: var(--boxcart-frontend-background-alt);
border-radius: var(--boxcart-frontend-radius);
font-size: 13px;
color: var(--boxcart-frontend-text-light);
font-style: italic;
}
.boxcart-order-confirmation__items {
margin-bottom: 16px;
}
.boxcart-order-confirmation__item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--boxcart-frontend-border);
}
.boxcart-order-confirmation__item:last-child {
border-bottom: none;
}
.boxcart-order-confirmation__item-details {
display: flex;
align-items: baseline;
gap: 8px;
}
.boxcart-order-confirmation__item-name {
font-size: 14px;
color: var(--boxcart-frontend-text);
}
.boxcart-order-confirmation__item-qty {
font-size: 14px;
color: var(--boxcart-frontend-text-muted);
}
.boxcart-order-confirmation__item-total {
font-size: 14px;
font-weight: 500;
color: var(--boxcart-frontend-text);
}
.boxcart-order-confirmation__summary-footer {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 16px;
border-top: 2px solid var(--boxcart-frontend-border);
}
.boxcart-order-confirmation__item-count {
font-size: 14px;
color: var(--boxcart-frontend-text-muted);
}
.boxcart-order-confirmation__subtotal,
.boxcart-order-confirmation__discount,
.boxcart-order-confirmation__total {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
}
.boxcart-order-confirmation__subtotal-label {
font-size: 14px;
color: var(--boxcart-frontend-text-muted);
}
.boxcart-order-confirmation__subtotal-value {
font-size: 14px;
color: var(--boxcart-frontend-text);
}
.boxcart-order-confirmation__discount {
color: #2e7d32;
}
.boxcart-order-confirmation__discount-label {
font-size: 14px;
display: flex;
align-items: center;
gap: 6px;
}
.boxcart-order-confirmation__discount-value {
font-size: 14px;
font-weight: 500;
}
.boxcart-order-confirmation__total {
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid var(--boxcart-frontend-border);
}
.boxcart-order-confirmation__total-label {
font-size: 14px;
font-weight: 600;
color: var(--boxcart-frontend-text);
}
.boxcart-order-confirmation__total-value {
font-size: 18px;
font-weight: 700;
color: var(--boxcart-frontend-text);
}
.boxcart-order-confirmation__notes {
background: var(--boxcart-frontend-warning-light);
border: 1px solid var(--boxcart-frontend-warning-border);
border-radius: var(--boxcart-frontend-radius);
padding: 16px;
margin-bottom: 24px;
}
.boxcart-order-confirmation__notes strong {
font-size: 14px;
color: var(--boxcart-frontend-warning);
}
.boxcart-order-confirmation__notes p {
margin: 8px 0 0 0;
font-size: 14px;
color: var(--boxcart-frontend-warning);
}
.boxcart-order-confirmation__actions {
text-align: center;
margin-top: 32px;
}
.boxcart-order-confirmation__actions .boxcart-btn {
display: inline-block;
padding: 14px 32px;
font-size: 16px;
font-weight: var(--boxcart-btn-font-weight, 600);
text-decoration: none;
border-radius: var(--boxcart-btn-radius, var(--boxcart-frontend-radius-sm));
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.boxcart-order-confirmation__actions .boxcart-btn--primary {
background-color: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary, #2D7D5F));
color: var(--boxcart-btn-primary-text, #ffffff);
border: none;
}
.boxcart-order-confirmation__actions .boxcart-btn--primary:hover {
background-color: var(--boxcart-btn-primary-bg-hover, var(--boxcart-frontend-primary-hover, #246850));
transform: translateY(-1px);
}
/* ==========================================================================
Checkout Responsive
========================================================================== */
@media (max-width: 960px) {
.boxcart-checkout__wrapper {
grid-template-columns: 1fr;
gap: 24px;
}
.boxcart-checkout__sidebar {
order: 1; /* Sidebar appears after main content on mobile */
}
.boxcart-checkout__main {
order: 0;
}
.boxcart-checkout__order-summary {
max-width: none;
}
}
@media (max-width: 768px) {
.boxcart-checkout {
padding: 0;
}
.boxcart-checkout__title {
font-size: 20px;
margin-bottom: 16px;
}
.boxcart-order-confirmation__details {
grid-template-columns: 1fr;
}
/* Login bar stacks on mobile */
.boxcart-checkout__login-bar-content {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.boxcart-checkout__login-bar-text {
text-align: center;
}
.boxcart-checkout__login-bar-form {
flex-wrap: wrap;
}
.boxcart-checkout__login-bar-input {
flex: 1 1 100%;
max-width: none;
}
.boxcart-checkout__login-bar-btn {
flex: 1 1 100%;
}
}
@media (max-width: 600px) {
.boxcart-checkout__section {
padding: 16px;
border-radius: var(--boxcart-frontend-radius);
}
.boxcart-checkout__section-title {
font-size: 16px;
margin-bottom: 16px;
padding-bottom: 12px;
}
.boxcart-checkout__order-summary {
padding: 16px;
}
.boxcart-checkout__form-row--half {
grid-template-columns: 1fr;
gap: 0;
}
.boxcart-checkout__total-value {
font-size: 16px;
}
.boxcart-date-btn {
min-width: 60px;
padding: 10px 12px;
}
.boxcart-date-btn__number {
font-size: 18px;
}
.boxcart-slot-btn {
padding: 10px 16px;
}
.boxcart-order-confirmation__title {
font-size: 22px;
}
.boxcart-order-confirmation__icon .dashicons {
font-size: 48px;
width: 48px;
height: 48px;
}
}
/* ==========================================================================
Inline Notices (for checkout/account pages)
========================================================================== */
.boxcart-notices--inline {
margin-bottom: 24px;
}
.boxcart-notices--inline .boxcart-notice {
margin-bottom: 8px;
box-shadow: none;
animation: none;
}
.boxcart-notices--inline .boxcart-notice:last-child {
margin-bottom: 0;
}
/* Inline notice variant with borders */
.boxcart-notice--bordered.boxcart-notice--success {
background: var(--boxcart-frontend-success-light);
color: var(--boxcart-frontend-success);
border: 1px solid var(--boxcart-frontend-success-border);
}
.boxcart-notice--bordered.boxcart-notice--error {
background: var(--boxcart-frontend-error-light);
color: var(--boxcart-frontend-error);
border: 1px solid var(--boxcart-frontend-error-border);
}
.boxcart-notice--bordered.boxcart-notice--warning {
background: var(--boxcart-frontend-warning-light);
color: var(--boxcart-frontend-warning);
border: 1px solid var(--boxcart-frontend-warning-border);
}
.boxcart-notice--bordered.boxcart-notice--info {
background: var(--boxcart-frontend-info-light);
color: var(--boxcart-frontend-info);
border: 1px solid var(--boxcart-frontend-info-border);
}
/* ==========================================================================
Account Page
========================================================================== */
.boxcart-account {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.boxcart-account__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
gap: 16px;
}
.boxcart-account__title {
font-size: 24px;
font-weight: 600;
color: var(--boxcart-frontend-text);
margin: 0;
}
.boxcart-account__back-link {
font-size: 14px;
color: var(--boxcart-frontend-primary);
text-decoration: none;
margin-bottom: 8px;
display: inline-block;
}
.boxcart-account__back-link:hover {
color: var(--boxcart-frontend-primary-hover);
text-decoration: underline;
}
.boxcart-account__logout {
font-size: 14px;
color: var(--boxcart-frontend-text-muted);
text-decoration: none;
}
.boxcart-account__logout:hover {
color: var(--boxcart-frontend-error);
text-decoration: underline;
}
.boxcart-account__greeting {
font-size: 16px;
color: var(--boxcart-frontend-text-light);
}
/* Account Section */
.boxcart-account__section {
background: var(--boxcart-frontend-background);
border: 1px solid var(--boxcart-frontend-border);
border-radius: var(--boxcart-frontend-radius);
padding: 24px;
margin-bottom: 24px;
}
.boxcart-account__section:last-child {
margin-bottom: 0;
}
.boxcart-account__section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid var(--boxcart-frontend-border);
}
.boxcart-account__section-title {
font-size: 16px;
font-weight: 600;
color: var(--boxcart-frontend-text);
margin: 0;
}
.boxcart-account__view-all,
.boxcart-account__edit-link,
button.boxcart-account__edit-link {
font-size: 14px;
color: var(--boxcart-frontend-primary) !important;
text-decoration: none;
background: none !important;
border: none !important;
padding: 0;
font-family: inherit;
cursor: pointer;
}
.boxcart-account__view-all:hover,
.boxcart-account__edit-link:hover,
button.boxcart-account__edit-link:hover,
.boxcart-account__view-all:focus,
.boxcart-account__edit-link:focus,
button.boxcart-account__edit-link:focus {
text-decoration: underline;
color: var(--boxcart-frontend-primary) !important;
background: none !important;
}
/* Auth Wrapper (Login/Register) */
.boxcart-account__auth-wrapper {
display: grid;
gap: 32px;
}
.boxcart-account__auth-wrapper--two-col {
grid-template-columns: 1fr 1fr;
}
.boxcart-account__auth-section {
background: var(--boxcart-frontend-background);
border: 1px solid var(--boxcart-frontend-border);
border-radius: var(--boxcart-frontend-radius);
padding: 24px;
}
.boxcart-account__form-actions {
margin-top: 24px;
}
.boxcart-account__form-links {
margin-top: 16px;
text-align: center;
}
.boxcart-account__lost-password {
font-size: 14px;
color: var(--boxcart-primary, #4a7c59) !important;
text-decoration: none;
background: none !important;
border: none !important;
cursor: pointer;
padding: 0;
outline: none;
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.boxcart-account__lost-password:hover,
.boxcart-account__lost-password:focus {
color: var(--boxcart-primary-dark, #3d6349) !important;
text-decoration: underline;
background: none !important;
outline: none;
}
.boxcart-form-field__hint {
display: block;
font-size: 12px;
color: var(--boxcart-frontend-text-muted);
margin-top: 4px;
}
/* Orders Table - wrapper specificity to override theme styles */
.boxcart-account .boxcart-account__orders-table-wrapper {
overflow: visible;
}
.boxcart-account .boxcart-account__orders-table-wrapper table.boxcart-account__orders-table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
border: none !important;
background: transparent;
box-shadow: none !important;
outline: none !important;
}
.boxcart-account .boxcart-account__orders-table-wrapper table.boxcart-account__orders-table thead,
.boxcart-account .boxcart-account__orders-table-wrapper table.boxcart-account__orders-table thead tr,
.boxcart-account .boxcart-account__orders-table-wrapper table.boxcart-account__orders-table tbody tr {
background: transparent !important;
}
.boxcart-account .boxcart-account__orders-table-wrapper table.boxcart-account__orders-table thead tr th {
text-align: left;
font-size: 12px;
font-weight: 600;
color: var(--boxcart-frontend-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 8px 12px;
border-bottom: 1px solid var(--boxcart-frontend-border-light) !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
background: transparent !important;
}
.boxcart-account .boxcart-account__orders-table-wrapper table.boxcart-account__orders-table thead tr th:first-child {
padding-left: 0;
}
.boxcart-account .boxcart-account__orders-table-wrapper table.boxcart-account__orders-table thead tr th:last-child {
padding-right: 0;
}
.boxcart-account .boxcart-account__orders-table-wrapper table.boxcart-account__orders-table tbody tr td {
padding: 12px;
border-bottom: 1px solid var(--boxcart-frontend-border-light) !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
font-size: 14px;
color: var(--boxcart-frontend-text);
background: transparent !important;
vertical-align: middle;
}
.boxcart-account .boxcart-account__orders-table-wrapper table.boxcart-account__orders-table tbody tr td:first-child {
padding-left: 0;
}
.boxcart-account .boxcart-account__orders-table-wrapper table.boxcart-account__orders-table tbody tr td:last-child {
padding-right: 0;
}
.boxcart-account .boxcart-account__orders-table-wrapper table.boxcart-account__orders-table tbody tr:last-child td {
border-bottom: none !important;
}
.boxcart-account .boxcart-account__order-number a,
.boxcart-account .boxcart-account__order-number button.boxcart-order-view-btn {
font-weight: 600;
color: var(--boxcart-frontend-primary);
text-decoration: none;
background: none;
border: none;
padding: 0;
cursor: pointer;
font-size: inherit;
font-family: inherit;
}
.boxcart-account .boxcart-account__order-number a:hover,
.boxcart-account .boxcart-account__order-number button.boxcart-order-view-btn:hover {
text-decoration: underline;
}
/* Dashboard order table - date columns don't wrap */
.boxcart-account--dashboard .boxcart-account__orders-table .boxcart-account__order-date,
.boxcart-account--dashboard .boxcart-account__orders-table .boxcart-account__order-collection {
white-space: nowrap;
}
/* Mobile order cards - hidden on desktop */
.boxcart-account__orders-mobile {
display: none;
}
/* Order actions cell with multiple buttons */
.boxcart-account__order-actions {
display: flex;
gap: 8px;
align-items: center;
justify-content: flex-end;
flex-direction: row;
flex-wrap: nowrap;
}
/* View and Reorder buttons - inline, branded */
.boxcart-account .boxcart-account__order-actions button.boxcart-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 90px !important;
padding: 8px 16px !important;
font-size: 13px !important;
font-weight: var(--boxcart-btn-font-weight, 600) !important;
border-radius: var(--boxcart-btn-radius, var(--boxcart-frontend-radius-sm)) !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
text-decoration: none !important;
box-sizing: border-box !important;
}
/* View button - secondary style */
.boxcart-account .boxcart-account__order-actions button.boxcart-btn--outline,
.boxcart-account .boxcart-account__order-actions button.boxcart-btn.boxcart-order-view-btn {
background: var(--boxcart-btn-secondary-bg, #ffffff) !important;
color: var(--boxcart-btn-secondary-text, var(--boxcart-frontend-text, #2c3338)) !important;
border: var(--boxcart-btn-secondary-border, 1px solid #dcdcde) !important;
}
.boxcart-account .boxcart-account__order-actions button.boxcart-btn--outline:hover,
.boxcart-account .boxcart-account__order-actions button.boxcart-btn.boxcart-order-view-btn:hover {
background: var(--boxcart-btn-secondary-bg-hover, #f6f7f7) !important;
color: var(--boxcart-btn-secondary-hover-text, var(--boxcart-btn-secondary-text, var(--boxcart-frontend-text))) !important;
border: var(--boxcart-btn-secondary-hover-border, 1px solid #c3c4c7) !important;
}
/* Reorder button - secondary style */
.boxcart-account .boxcart-account__order-actions button.boxcart-btn--secondary,
.boxcart-account .boxcart-account__order-actions button.boxcart-reorder-btn {
background: var(--boxcart-btn-secondary-bg, #ffffff) !important;
color: var(--boxcart-btn-secondary-text, var(--boxcart-frontend-text, #2c3338)) !important;
border: var(--boxcart-btn-secondary-border, 1px solid #dcdcde) !important;
}
.boxcart-account .boxcart-account__order-actions button.boxcart-btn--secondary:hover,
.boxcart-account .boxcart-account__order-actions button.boxcart-reorder-btn:hover {
background: var(--boxcart-btn-secondary-bg-hover, #f6f7f7) !important;
color: var(--boxcart-btn-secondary-hover-text, var(--boxcart-btn-secondary-text, var(--boxcart-frontend-text))) !important;
border: var(--boxcart-btn-secondary-hover-border, 1px solid #c3c4c7) !important;
}
.boxcart-account__order-placed {
display: block;
font-size: 12px;
color: var(--boxcart-frontend-text-muted);
margin-top: 2px;
}
.boxcart-account__collection-date,
.boxcart-account__collection-time {
display: block;
}
.boxcart-account__collection-time {
font-size: 13px;
color: var(--boxcart-frontend-text-muted);
}
/* Status Badge */
.boxcart-status-badge {
display: inline-block;
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
border-radius: 50px;
white-space: nowrap;
}
.boxcart-status-badge--large {
padding: 6px 14px;
font-size: 13px;
}
.boxcart-status--pending {
background: var(--boxcart-frontend-warning-light);
color: var(--boxcart-frontend-warning);
}
.boxcart-status--processing {
background: var(--boxcart-frontend-info-light);
color: var(--boxcart-frontend-info);
}
.boxcart-status--ready {
background: var(--boxcart-frontend-success-light);
color: var(--boxcart-frontend-success);
}
.boxcart-status--completed {
background: var(--boxcart-frontend-background-alt);
color: var(--boxcart-frontend-text-light);
}
.boxcart-status--cancelled {
background: var(--boxcart-frontend-error-light);
color: var(--boxcart-frontend-error);
}
/* Empty Orders */
.boxcart-account__empty-orders {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 48px 24px;
}
.boxcart-account__empty-orders .dashicons {
font-size: 48px;
width: 48px;
height: 48px;
color: var(--boxcart-frontend-text-muted);
margin-bottom: 16px;
}
.boxcart-account__empty-orders p {
display: block;
font-size: 14px;
color: var(--boxcart-frontend-text-muted);
margin: 0 0 20px 0;
}
/* Account Details */
.boxcart-account__details {
display: flex;
flex-direction: column;
gap: 12px;
}
.boxcart-account__detail-row {
display: flex;
gap: 12px;
}
.boxcart-account__detail-label {
font-size: 14px;
color: var(--boxcart-frontend-text-muted);
min-width: 80px;
}
.boxcart-account__detail-value {
font-size: 14px;
color: var(--boxcart-frontend-text);
}
/* Edit Account Form */
.boxcart-account__form-row--half {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.boxcart-account__password-section {
border: none;
background: var(--boxcart-frontend-background-alt);
}
/* Order View */
.boxcart-account__order-header {
margin-bottom: 24px;
}
.boxcart-account__order-meta {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.boxcart-account__order-placed-date {
font-size: 14px;
color: var(--boxcart-frontend-text-muted);
}
.boxcart-account__order-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 24px;
}
.boxcart-account__order-section {
background: var(--boxcart-frontend-background);
border: 1px solid var(--boxcart-frontend-border);
border-radius: var(--boxcart-frontend-radius);
padding: 20px;
}
.boxcart-account__order-section-title {
font-size: 14px;
font-weight: 600;
color: var(--boxcart-frontend-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 16px 0;
padding-bottom: 12px;
border-bottom: 1px solid var(--boxcart-frontend-border);
}
.boxcart-account__collection-location {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 16px;
}
.boxcart-account__collection-location .dashicons {
color: var(--boxcart-frontend-primary);
flex-shrink: 0;
}
.boxcart-account__collection-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.boxcart-account__collection-info strong {
font-size: 15px;
color: var(--boxcart-frontend-text);
}
.boxcart-account__collection-info span {
font-size: 13px;
color: var(--boxcart-frontend-text-muted);
}
.boxcart-account__collection-datetime {
display: flex;
flex-direction: column;
gap: 8px;
}
.boxcart-account__collection-date-row,
.boxcart-account__collection-time-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--boxcart-frontend-text);
}
.boxcart-account__collection-date-row .dashicons,
.boxcart-account__collection-time-row .dashicons {
color: var(--boxcart-frontend-text-muted);
font-size: 16px;
width: 16px;
height: 16px;
}
.boxcart-account__collection-instructions {
margin-top: 16px;
padding: 12px;
background: var(--boxcart-frontend-background-alt);
border-radius: var(--boxcart-frontend-radius);
font-size: 13px;
color: var(--boxcart-frontend-text-light);
}
/* Order Items List */
.boxcart-account__items-list {
margin-bottom: 16px;
}
.boxcart-account__item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--boxcart-frontend-border);
}
.boxcart-account__item:last-child {
border-bottom: none;
}
.boxcart-account__item-details {
display: flex;
align-items: baseline;
gap: 8px;
}
.boxcart-account__item-name {
font-size: 14px;
color: var(--boxcart-frontend-text);
}
.boxcart-account__item-qty {
font-size: 14px;
color: var(--boxcart-frontend-text-muted);
}
.boxcart-account__item-total {
font-size: 14px;
font-weight: 500;
color: var(--boxcart-frontend-text);
}
.boxcart-account__items-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
border-top: 2px solid var(--boxcart-frontend-border);
}
.boxcart-account__items-count {
font-size: 14px;
color: var(--boxcart-frontend-text-muted);
}
.boxcart-account__items-total {
display: flex;
align-items: baseline;
gap: 8px;
}
.boxcart-account__total-label {
font-size: 14px;
font-weight: 600;
color: var(--boxcart-frontend-text);
}
.boxcart-account__total-value {
font-size: 18px;
font-weight: 700;
color: var(--boxcart-frontend-text);
}
/* Order Notes */
.boxcart-account__order-notes {
background: var(--boxcart-frontend-warning-light);
border: 1px solid var(--boxcart-frontend-warning-border);
border-radius: var(--boxcart-frontend-radius);
padding: 16px;
}
.boxcart-account__order-notes strong {
font-size: 14px;
color: var(--boxcart-frontend-warning);
}
.boxcart-account__order-notes p {
margin: 8px 0 0 0;
font-size: 14px;
color: var(--boxcart-frontend-warning);
}
/* Pagination */
.boxcart-pagination {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--boxcart-frontend-border);
flex-wrap: wrap;
gap: 16px;
}
.boxcart-pagination__info {
font-size: 14px;
color: var(--boxcart-frontend-text-muted);
}
.boxcart-pagination__links {
display: flex;
gap: 4px;
}
.boxcart-pagination__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 12px;
font-size: 14px;
color: var(--boxcart-frontend-text);
background: var(--boxcart-frontend-background);
border: 1px solid var(--boxcart-frontend-border);
border-radius: var(--boxcart-frontend-radius);
text-decoration: none;
transition: all var(--boxcart-frontend-transition);
}
.boxcart-pagination__link:hover {
border-color: var(--boxcart-frontend-primary);
color: var(--boxcart-frontend-primary);
}
.boxcart-pagination__link:focus {
outline: none;
border-color: var(--boxcart-frontend-primary);
box-shadow: 0 0 0 2px var(--boxcart-frontend-primary-light);
}
.boxcart-pagination__link--active {
background: var(--boxcart-frontend-primary);
border-color: var(--boxcart-frontend-primary);
color: white;
}
.boxcart-pagination__link--active:hover {
color: white;
}
/* Button Variants */
.boxcart-btn--full {
width: 100%;
}
.boxcart-btn--small {
padding: 6px 12px;
font-size: 13px;
}
.boxcart-btn--outline,
.boxcart-btn--outline:link,
.boxcart-btn--outline:visited {
background: transparent;
border: 1px solid var(--boxcart-frontend-border);
color: var(--boxcart-frontend-text);
}
/* Outline button wrapper specificity */
.boxcart-account button.boxcart-btn--outline,
.boxcart-checkout button.boxcart-btn--outline,
.boxcart-sidecart button.boxcart-btn--outline,
.boxcart-basket button.boxcart-btn--outline,
.boxcart-products button.boxcart-btn--outline,
.boxcart-account a.boxcart-btn--outline,
.boxcart-checkout a.boxcart-btn--outline {
background: transparent;
border: 1px solid var(--boxcart-frontend-border);
color: var(--boxcart-frontend-text);
}
.boxcart-btn--outline:hover,
.boxcart-btn--outline:focus,
.boxcart-btn--outline:active {
border-color: var(--boxcart-frontend-primary);
color: var(--boxcart-frontend-primary);
background: transparent;
}
/* Outline button hover/focus wrapper specificity */
.boxcart-account button.boxcart-btn--outline:hover,
.boxcart-account button.boxcart-btn--outline:focus,
.boxcart-checkout button.boxcart-btn--outline:hover,
.boxcart-checkout button.boxcart-btn--outline:focus,
.boxcart-sidecart button.boxcart-btn--outline:hover,
.boxcart-sidecart button.boxcart-btn--outline:focus {
border-color: var(--boxcart-frontend-primary);
color: var(--boxcart-frontend-primary);
background: transparent;
}
/* ==========================================================================
Account Responsive
========================================================================== */
@media (max-width: 768px) {
.boxcart-account__auth-wrapper--two-col {
grid-template-columns: 1fr;
}
.boxcart-account__order-content {
grid-template-columns: 1fr;
}
.boxcart-account__form-row--half {
grid-template-columns: 1fr;
gap: 0;
}
/* Switch from table to cards on mobile */
.boxcart-account__orders-desktop {
display: none !important;
}
.boxcart-account__orders-mobile {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Order card styles */
.boxcart-order-card {
border: 1px solid var(--boxcart-frontend-border-light, #e5e7eb);
border-radius: 8px;
padding: 16px;
background: #fff;
}
.boxcart-order-card__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.boxcart-order-card__number {
font-weight: 600;
font-size: 14px;
color: var(--boxcart-frontend-primary) !important;
background: none !important;
border: none !important;
padding: 0;
cursor: pointer;
font-family: inherit;
-webkit-tap-highlight-color: transparent;
}
.boxcart-order-card__number:hover,
.boxcart-order-card__number:active,
.boxcart-order-card__number:focus {
text-decoration: underline;
color: var(--boxcart-frontend-primary) !important;
background: none !important;
}
.boxcart-order-card__details {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
}
.boxcart-order-card__row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
}
.boxcart-order-card__label {
color: var(--boxcart-frontend-text-muted, #6b7280);
}
.boxcart-order-card__value {
color: var(--boxcart-frontend-text, #2c3338);
}
.boxcart-order-card__value--total {
font-weight: 600;
}
.boxcart-order-card__actions {
display: flex;
gap: 8px;
}
.boxcart-order-card__actions .boxcart-btn {
flex: 1;
-webkit-tap-highlight-color: transparent;
}
}
@media (max-width: 600px) {
.boxcart-account__header {
flex-direction: column;
align-items: flex-start;
}
.boxcart-account__section {
padding: 16px;
}
.boxcart-pagination {
flex-direction: column;
text-align: center;
}
}
/* ==========================================================================
Collection Slot Bar
========================================================================== */
.boxcart-slot-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 20px;
margin-bottom: 24px;
background: var(--boxcart-frontend-success-accent-light);
border: 1px solid var(--boxcart-frontend-success-accent);
border-radius: var(--boxcart-frontend-radius);
}
.boxcart-slot-bar--empty {
background: var(--boxcart-frontend-warning-light);
border-color: var(--boxcart-frontend-warning-border);
}
.boxcart-slot-bar--warning {
background: var(--boxcart-frontend-error-light);
border-color: var(--boxcart-frontend-error-border);
}
.boxcart-slot-bar__info {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
}
.boxcart-slot-bar__icon {
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--boxcart-frontend-success-accent);
}
.boxcart-slot-bar--empty .boxcart-slot-bar__icon {
color: var(--boxcart-frontend-warning);
}
.boxcart-slot-bar--warning .boxcart-slot-bar__icon {
color: var(--boxcart-frontend-error);
}
.boxcart-slot-bar__text {
font-size: 14px;
color: var(--boxcart-frontend-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.boxcart-slot-bar__text strong {
font-weight: 600;
color: var(--boxcart-frontend-success-accent);
}
.boxcart-slot-bar--empty .boxcart-slot-bar__text,
.boxcart-slot-bar--warning .boxcart-slot-bar__text {
color: var(--boxcart-frontend-text);
}
/* Countdown Timer */
.boxcart-slot-bar__countdown {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
font-size: 13px;
font-weight: 600;
color: var(--boxcart-frontend-success-accent);
background: rgba(45, 125, 95, 0.1);
border-radius: var(--boxcart-frontend-radius-sm);
font-variant-numeric: tabular-nums;
}
.boxcart-slot-bar__countdown--warning {
color: var(--boxcart-frontend-warning);
background: rgba(199, 144, 17, 0.1);
}
.boxcart-slot-bar__countdown--urgent {
color: var(--boxcart-frontend-error);
background: rgba(199, 60, 60, 0.1);
animation: boxcart-countdown-pulse 1s ease-in-out infinite;
}
@keyframes boxcart-countdown-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
.boxcart-slot-bar__change {
flex-shrink: 0;
padding: 8px 16px;
font-size: 14px;
font-weight: var(--boxcart-btn-font-weight, 600);
color: var(--boxcart-btn-primary-text, #ffffff);
background: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary, #2D7D5F));
background-color: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary, #2D7D5F));
border: var(--boxcart-btn-primary-border, none);
border-radius: var(--boxcart-btn-radius, var(--boxcart-frontend-radius-sm));
cursor: pointer;
transition: background-color var(--boxcart-frontend-transition);
}
.boxcart-slot-bar__change:hover,
.boxcart-slot-bar__change:focus {
background: var(--boxcart-btn-primary-bg-hover, var(--boxcart-frontend-primary-hover, #246850));
background-color: var(--boxcart-btn-primary-bg-hover, var(--boxcart-frontend-primary-hover, #246850));
color: var(--boxcart-btn-primary-hover-text, #ffffff);
border: var(--boxcart-btn-primary-hover-border, none);
}
.boxcart-slot-bar--empty .boxcart-slot-bar__change {
background: var(--boxcart-frontend-warning);
background-color: var(--boxcart-frontend-warning);
}
.boxcart-slot-bar--empty .boxcart-slot-bar__change:hover {
background: #6b5003;
background-color: #6b5003;
}
.boxcart-slot-bar--warning .boxcart-slot-bar__change {
background: var(--boxcart-frontend-error);
background-color: var(--boxcart-frontend-error);
}
.boxcart-slot-bar--warning .boxcart-slot-bar__change:hover {
background: #a33e3e;
background-color: #a33e3e;
}
/* ==========================================================================
Modal Overlay & Container
========================================================================== */
/* Scroll lock — prevents background scrolling when a modal is open */
body.boxcart-scroll-locked {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
}
.boxcart-modal-overlay {
position: fixed;
inset: 0;
background: var(--boxcart-modal-overlay-bg, rgba(0, 0, 0, 0.5));
z-index: 1000001;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: opacity var(--boxcart-frontend-transition-normal), visibility var(--boxcart-frontend-transition-normal);
}
.boxcart-modal-overlay.is-visible {
opacity: 1;
visibility: visible;
touch-action: none;
overscroll-behavior: none;
}
.boxcart-modal {
background: var(--boxcart-frontend-background);
border-radius: var(--boxcart-frontend-radius-lg);
box-shadow: var(--boxcart-modal-shadow, 0 20px 60px rgba(0, 0, 0, 0.2));
width: 100%;
max-width: 520px;
max-height: calc(100vh - 40px);
max-height: calc(100dvh - 40px);
display: flex;
flex-direction: column;
transform: translateY(20px);
transition: transform var(--boxcart-frontend-transition-normal);
overflow: hidden;
}
.boxcart-modal-overlay.is-visible .boxcart-modal {
transform: translateY(0);
}
/* On mobile, keep modals centred so they sit safely between browser chrome
(address bar / toolbar). Header and footer are sticky so the user can
always see the title and reach the buttons. Safe-area insets protect
against notch/home-indicator overlap on iOS and gesture-nav Android. */
@media (max-width: 600px) {
.boxcart-modal-overlay {
align-items: center;
padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px));
}
.boxcart-modal {
max-height: calc(100vh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.boxcart-modal .boxcart-modal__header {
position: sticky;
top: 0;
z-index: 1;
background: var(--boxcart-frontend-background);
flex-shrink: 0;
}
.boxcart-modal .boxcart-modal__body {
overflow: visible;
flex: none;
}
.boxcart-modal .boxcart-modal__footer {
position: sticky;
bottom: 0;
z-index: 1;
background: var(--boxcart-frontend-background);
flex-shrink: 0;
}
}
.boxcart-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var(--boxcart-frontend-border);
}
.boxcart-modal__title {
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--boxcart-frontend-text-dark);
}
.boxcart-modal__close,
.boxcart-login-modal button.boxcart-modal__close,
.boxcart-slot-modal button.boxcart-modal__close {
width: 32px;
height: 32px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
background-color: transparent;
border: none;
border-radius: var(--boxcart-frontend-radius-sm);
color: var(--boxcart-frontend-text-muted);
cursor: pointer;
outline: none;
text-decoration: none;
transition: all var(--boxcart-frontend-transition);
}
.boxcart-modal__close:hover,
.boxcart-login-modal button.boxcart-modal__close:hover,
.boxcart-login-modal button.boxcart-modal__close:focus,
.boxcart-slot-modal button.boxcart-modal__close:hover,
.boxcart-slot-modal button.boxcart-modal__close:focus {
background: var(--boxcart-frontend-background-alt);
background-color: var(--boxcart-frontend-background-alt);
color: var(--boxcart-frontend-text);
outline: none;
}
.boxcart-modal__close svg {
width: 20px;
height: 20px;
}
.boxcart-modal__body {
padding: 24px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
flex: 1;
min-height: 0; /* Allow flex child to shrink and scroll */
}
.boxcart-modal__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 16px 24px;
padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
border-top: 1px solid var(--boxcart-frontend-border);
background: var(--boxcart-frontend-background-alt);
border-radius: 0 0 var(--boxcart-frontend-radius-lg) var(--boxcart-frontend-radius-lg);
flex-shrink: 0;
}
/* ==========================================================================
Product Info Button & Modal
========================================================================== */
.boxcart-product-info-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
margin-left: 6px;
background: transparent;
border: none;
border-radius: 50%;
color: var(--boxcart-frontend-text-muted);
cursor: pointer;
vertical-align: middle;
transition: all var(--boxcart-frontend-transition);
}
.boxcart-product-info-btn:hover {
color: var(--boxcart-frontend-primary);
background: var(--boxcart-frontend-primary-light);
}
.boxcart-product-info-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Table view name styling to accommodate inline info button */
.boxcart-table-product__name {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
}
/* Card view name styling */
.boxcart-product-card__name {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
}
/* Product Info Modal specific styles */
.boxcart-product-info-modal {
max-width: 480px;
}
.boxcart-product-info-modal__header {
align-items: flex-start;
}
.boxcart-product-info-modal__header-content {
flex: 1;
min-width: 0;
}
.boxcart-product-info-modal__header-content .boxcart-modal__title {
text-align: left;
margin-bottom: 0;
}
.boxcart-product-info-modal__price {
font-size: 18px;
font-weight: 700;
color: var(--boxcart-frontend-primary);
margin-top: 4px;
}
.boxcart-product-info-modal__description {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: var(--boxcart-frontend-text);
white-space: pre-wrap;
}
/* ==========================================================================
Login / Register Modal
========================================================================== */
.boxcart-login-modal {
max-width: 440px;
}
.boxcart-login-modal .boxcart-modal__body {
overflow-y: auto;
}
.boxcart-login-modal__message {
margin: 0 0 20px;
font-size: 14px;
line-height: 1.5;
color: var(--boxcart-frontend-text-muted);
text-align: center;
}
.boxcart-login-modal__alert {
padding: 10px 14px;
border-radius: var(--boxcart-frontend-radius-sm);
font-size: 14px;
line-height: 1.4;
margin-bottom: 16px;
}
.boxcart-login-modal__alert--error {
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
}
.boxcart-login-modal__alert--success {
background: #f0fdf4;
color: #166534;
border: 1px solid #bbf7d0;
}
.boxcart-login-modal__tabs {
display: flex;
gap: 0;
margin-bottom: 20px;
border-bottom: 2px solid var(--boxcart-frontend-border);
}
.boxcart-login-modal button.boxcart-login-modal__tab {
flex: 1;
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
color: var(--boxcart-frontend-text-muted);
background: transparent;
background-color: transparent;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
cursor: pointer;
outline: none;
text-decoration: none;
transition: all var(--boxcart-frontend-transition);
}
.boxcart-login-modal button.boxcart-login-modal__tab:hover,
.boxcart-login-modal button.boxcart-login-modal__tab:focus {
color: var(--boxcart-frontend-text);
background: transparent;
background-color: transparent;
outline: none;
}
.boxcart-login-modal button.boxcart-login-modal__tab--active,
.boxcart-login-modal button.boxcart-login-modal__tab--active:hover,
.boxcart-login-modal button.boxcart-login-modal__tab--active:focus {
color: var(--boxcart-frontend-primary);
border-bottom-color: var(--boxcart-frontend-primary);
background: transparent;
background-color: transparent;
}
.boxcart-login-modal__form-section--hidden {
display: none;
}
.boxcart-login-modal__form .boxcart-form-field {
margin-bottom: 16px;
}
.boxcart-login-modal__form-actions {
margin-top: 20px;
}
/* ==========================================================================
Order View Modal - Fixed position with overlay
========================================================================== */
/* Reset generic .boxcart-modal styles for account modals - these use a different structure */
.boxcart-modal.boxcart-order-modal,
.boxcart-modal.boxcart-reorder-modal,
.boxcart-modal.boxcart-edit-modal,
.boxcart-modal.boxcart-password-modal {
background: transparent;
border-radius: 0;
box-shadow: none;
width: 100%;
max-width: none;
max-height: none;
transform: none;
overflow: visible;
}
.boxcart-order-modal {
position: fixed;
inset: 0;
z-index: 10001;
display: none;
}
.boxcart-order-modal.is-visible {
display: block;
}
.boxcart-order-modal .boxcart-modal__overlay {
position: absolute;
inset: 0;
background: var(--boxcart-modal-overlay-bg, rgba(0, 0, 0, 0.5));
}
.boxcart-order-modal .boxcart-modal__container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--boxcart-frontend-background);
border-radius: var(--boxcart-frontend-radius-lg);
box-shadow: var(--boxcart-modal-shadow, 0 20px 60px rgba(0, 0, 0, 0.2));
width: calc(100% - 40px);
max-width: 520px;
max-height: calc(100vh - 40px);
display: flex;
flex-direction: column;
}
.boxcart-order-modal .boxcart-modal__body {
overflow-y: auto;
}
/* Order Modal Loading State */
.boxcart-order-modal__loading {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 40px 20px;
color: var(--boxcart-frontend-text-muted);
}
/* Order Modal Content */
.boxcart-order-modal__meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.boxcart-order-modal__date {
font-size: 13px;
color: var(--boxcart-frontend-text-muted);
}
.boxcart-order-modal__modify-notice {
display: flex;
align-items: center;
gap: 8px;
padding: 12px;
background: var(--boxcart-frontend-primary-light);
border-radius: var(--boxcart-frontend-radius-sm);
color: var(--boxcart-frontend-primary);
font-size: 13px;
margin-bottom: 20px;
}
.boxcart-order-modal__modify-notice--expired {
background: #f3f4f6;
color: #9ca3af;
}
.boxcart-order-modal__modify-notice--expired svg {
color: #9ca3af;
}
.boxcart-order-modal__section {
margin-bottom: 20px;
}
.boxcart-order-modal__section:last-child {
margin-bottom: 0;
}
.boxcart-order-modal__section-title {
font-size: 14px;
font-weight: 600;
color: var(--boxcart-frontend-text-dark);
margin: 0 0 12px 0;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.boxcart-order-modal__collection {
background: var(--boxcart-frontend-background-alt);
border-radius: var(--boxcart-frontend-radius-sm);
padding: 16px;
}
.boxcart-order-modal__location {
font-weight: 600;
color: var(--boxcart-frontend-text);
margin-bottom: 8px;
}
.boxcart-order-modal__datetime {
font-size: 14px;
color: var(--boxcart-frontend-text-light);
}
.boxcart-order-modal__slot-date,
.boxcart-order-modal__slot-time {
display: flex;
align-items: center;
gap: 8px;
}
.boxcart-order-modal__instructions {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--boxcart-frontend-border);
font-size: 13px;
font-style: italic;
color: var(--boxcart-frontend-text-muted);
}
/* Order Modal Items */
.boxcart-order-modal__items {
border: 1px solid var(--boxcart-frontend-border-light);
border-radius: var(--boxcart-frontend-radius-sm);
}
.boxcart-order-modal__item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 12px;
border-bottom: 1px solid var(--boxcart-frontend-border-light);
}
.boxcart-order-modal__item:last-child {
border-bottom: none;
}
.boxcart-order-modal__item-details {
display: flex;
align-items: center;
gap: 8px;
}
.boxcart-order-modal__item-name {
flex: 1;
font-weight: 500;
color: var(--boxcart-frontend-text);
min-width: 0;
}
.boxcart-order-modal__item-qty {
color: var(--boxcart-frontend-text-muted);
font-size: 13px;
min-width: 60px;
text-align: right;
flex-shrink: 0;
white-space: nowrap;
}
.boxcart-order-modal__item-price {
font-weight: 600;
color: var(--boxcart-frontend-text);
min-width: 50px;
text-align: right;
flex-shrink: 0;
}
.boxcart-order-modal__footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
background: var(--boxcart-frontend-background-alt);
border-radius: 0 0 var(--boxcart-frontend-radius-sm) var(--boxcart-frontend-radius-sm);
border: 1px solid var(--boxcart-frontend-border-light);
border-top: none;
}
.boxcart-order-modal__item-count {
font-size: 13px;
color: var(--boxcart-frontend-text-muted);
}
.boxcart-order-modal__total {
font-weight: 600;
color: var(--boxcart-frontend-text-dark);
}
.boxcart-order-modal__notes {
margin-top: 20px;
padding: 12px;
background: var(--boxcart-frontend-background-alt);
border-radius: var(--boxcart-frontend-radius-sm);
font-size: 14px;
}
.boxcart-order-modal__notes strong {
display: block;
margin-bottom: 6px;
color: var(--boxcart-frontend-text);
}
.boxcart-order-modal__notes-text {
margin: 0;
color: var(--boxcart-frontend-text-light);
}
/* Order Modal Footer */
.boxcart-order-modal .boxcart-modal__footer {
justify-content: space-between;
}
@media (max-width: 600px) {
.boxcart-order-modal .boxcart-modal__container {
width: 100%;
max-width: 100%;
max-height: 95vh;
top: auto;
bottom: 0;
left: 0;
transform: none;
border-radius: var(--boxcart-frontend-radius-lg) var(--boxcart-frontend-radius-lg) 0 0;
}
}
/* ==========================================================================
Order Modal - Edit Mode Styles
========================================================================== */
/* Footer visibility rules moved to after high-specificity modal footer block (line ~6938) */
/* Edit mode item row */
div.boxcart-order-modal .boxcart-order-modal__edit-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-bottom: 1px solid var(--boxcart-frontend-border-color, #e5e5e5);
transition: opacity 0.2s ease;
}
div.boxcart-order-modal .boxcart-order-modal__edit-item:last-child {
border-bottom: none;
}
div.boxcart-order-modal .boxcart-order-modal__edit-item-name {
flex: 1;
font-size: 14px;
color: var(--boxcart-frontend-text, #2C3338);
display: flex;
flex-direction: column;
min-width: 0;
}
div.boxcart-order-modal .boxcart-order-modal__edit-item-unit {
font-size: 11px;
color: var(--boxcart-frontend-text-muted, #787C82);
margin-top: 2px;
}
/* Quantity stepper */
div.boxcart-order-modal .boxcart-order-modal__edit-qty {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
div.boxcart-order-modal button.boxcart-order-modal__edit-qty-btn {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
border: 1px solid var(--boxcart-frontend-border-color, #e5e5e5);
border-radius: var(--boxcart-qty-button-radius, var(--boxcart-frontend-radius-sm));
background: var(--boxcart-qty-button-bg, #f3f4f6);
color: var(--boxcart-qty-button-text, #374151);
cursor: pointer;
transition: background-color 0.15s ease;
padding: 0;
line-height: 1;
box-shadow: none;
}
div.boxcart-order-modal button.boxcart-order-modal__edit-qty-btn:hover {
background: var(--boxcart-qty-button-hover-bg, #e5e7eb);
color: var(--boxcart-qty-button-text, #374151);
}
div.boxcart-order-modal button.boxcart-order-modal__edit-qty-btn:active,
div.boxcart-order-modal button.boxcart-order-modal__edit-qty-btn:focus {
background: var(--boxcart-qty-button-hover-bg, #e5e7eb);
color: var(--boxcart-qty-button-text, #374151);
outline: none;
box-shadow: none;
}
div.boxcart-order-modal .boxcart-order-modal__edit-qty-value {
min-width: 32px;
text-align: center;
font-size: 14px;
font-weight: 600;
color: var(--boxcart-frontend-text, #2C3338);
}
div.boxcart-order-modal .boxcart-order-modal__edit-qty-unit {
font-size: 13px;
font-weight: 400;
color: var(--boxcart-frontend-text-muted, #6c757d);
white-space: nowrap;
}
/* Edit item price */
div.boxcart-order-modal .boxcart-order-modal__edit-item-price {
font-size: 14px;
font-weight: 600;
color: var(--boxcart-frontend-text, #2C3338);
min-width: 50px;
text-align: right;
flex-shrink: 0;
}
/* Removed item (quantity 0) */
div.boxcart-order-modal .boxcart-order-modal__edit-item--removed {
opacity: 0.4;
}
div.boxcart-order-modal .boxcart-order-modal__edit-item--removed .boxcart-order-modal__edit-item-name {
text-decoration: line-through;
}
/* Edit slot: place Change button inline with datetime text */
.boxcart-order-modal__datetime.boxcart-order-modal__datetime--editable {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
/* Change Collection Slot button - scoped to plugin */
div.boxcart-order-modal button.boxcart-order-modal__edit-slot-change {
white-space: nowrap !important;
font-size: 13px !important;
padding: 6px 12px !important;
background: var(--boxcart-btn-secondary-bg, #ffffff) !important;
color: var(--boxcart-btn-secondary-text, #2C3338) !important;
border: 1px solid var(--boxcart-frontend-border-color, #e5e5e5) !important;
border-radius: var(--boxcart-btn-radius, var(--boxcart-frontend-radius-sm)) !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
}
div.boxcart-order-modal button.boxcart-order-modal__edit-slot-change:hover {
background: var(--boxcart-btn-secondary-bg-hover, #f6f7f7) !important;
color: var(--boxcart-btn-secondary-text, #2C3338) !important;
}
div.boxcart-order-modal button.boxcart-order-modal__edit-slot-change:focus-visible {
outline: 2px solid var(--boxcart-frontend-primary, #2D7D5F) !important;
outline-offset: 2px !important;
}
/* Inline slot selector within order modal */
div.boxcart-order-modal .boxcart-order-modal__inline-slot-selector {
margin-top: 12px;
padding: 12px;
background: var(--boxcart-frontend-background-alt, #f9f9f9);
border: 1px solid var(--boxcart-frontend-border-color, #e5e5e5);
border-radius: var(--boxcart-btn-radius, var(--boxcart-frontend-radius-sm));
}
div.boxcart-order-modal .boxcart-order-modal__inline-slot-selector .boxcart-form-group {
margin-bottom: 12px;
}
div.boxcart-order-modal .boxcart-order-modal__inline-slot-selector .boxcart-form-group:last-child {
margin-bottom: 0;
}
div.boxcart-order-modal .boxcart-order-modal__inline-slot-selector .boxcart-label {
display: block;
font-size: 13px;
font-weight: 600;
margin-bottom: 6px;
color: var(--boxcart-frontend-text, #2C3338);
}
div.boxcart-order-modal .boxcart-order-modal__inline-slot-selector .boxcart-select {
width: 100%;
padding: 8px 36px 8px 12px;
border: 1px solid var(--boxcart-frontend-border-color, #e5e5e5);
border-radius: var(--boxcart-btn-radius, var(--boxcart-frontend-radius-sm));
font-size: 14px;
font-family: inherit;
color: var(--boxcart-frontend-text, #2C3338);
background: #fff;
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23787C82' d='M2.5 4.5L6 8L9.5 4.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}
/* Inline slot selector: dates use the boxcart-date-btn card pattern,
times use the boxcart-slot / boxcart-checkout__slot-list pattern.
We scope selectors to the order modal so existing shared styles apply. */
div.boxcart-order-modal .boxcart-order-modal__inline-slot-dates {
display: block;
}
div.boxcart-order-modal .boxcart-order-modal__inline-slot-times {
display: block;
}
/* Make the dates scroll wrapper fit within the inline selector */
div.boxcart-order-modal .boxcart-order-modal__inline-slot-selector .boxcart-checkout__dates-scroll-wrapper {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
/* Ensure date buttons and slot list get proper styles inside the modal */
div.boxcart-order-modal .boxcart-order-modal__inline-slot-selector button.boxcart-date-btn {
background: var(--boxcart-frontend-background) !important;
border: 1px solid var(--boxcart-frontend-border-light) !important;
}
div.boxcart-order-modal .boxcart-order-modal__inline-slot-selector button.boxcart-date-btn:not([disabled]):hover {
border-color: var(--boxcart-frontend-primary) !important;
background: var(--boxcart-frontend-primary-light, #E8F5F0) !important;
}
div.boxcart-order-modal .boxcart-order-modal__inline-slot-selector button.boxcart-date-btn--selected {
background: var(--boxcart-frontend-primary, #2D7D5F) !important;
border-color: var(--boxcart-frontend-primary, #2D7D5F) !important;
color: #fff !important;
}
div.boxcart-order-modal .boxcart-order-modal__inline-slot-selector button.boxcart-date-btn--selected .boxcart-date-btn__day,
div.boxcart-order-modal .boxcart-order-modal__inline-slot-selector button.boxcart-date-btn--selected .boxcart-date-btn__number,
div.boxcart-order-modal .boxcart-order-modal__inline-slot-selector button.boxcart-date-btn--selected .boxcart-date-btn__month {
color: #fff !important;
}
/* Slot list inside inline selector */
div.boxcart-order-modal .boxcart-order-modal__inline-slot-selector .boxcart-checkout__slot-list {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
div.boxcart-order-modal .boxcart-order-modal__inline-slot-selector .boxcart-slot {
width: 100%;
}
div.boxcart-order-modal .boxcart-order-modal__inline-slot-loading {
font-size: 13px;
color: var(--boxcart-frontend-text-muted, #999);
padding: 8px 0;
}
/* Edit notes textarea */
div.boxcart-order-modal textarea.boxcart-order-modal__edit-notes {
width: 100% !important;
padding: 10px 12px !important;
border: 1px solid var(--boxcart-frontend-border-color, #e5e5e5) !important;
border-radius: var(--boxcart-btn-radius, var(--boxcart-frontend-radius-sm)) !important;
font-size: 14px !important;
font-family: inherit !important;
color: var(--boxcart-frontend-text, #2C3338) !important;
resize: vertical !important;
min-height: 60px !important;
box-sizing: border-box !important;
transition: border-color 0.15s ease !important;
background: #fff !important;
}
div.boxcart-order-modal textarea.boxcart-order-modal__edit-notes:focus {
outline: none !important;
border-color: var(--boxcart-frontend-primary, #2D7D5F) !important;
box-shadow: 0 0 0 2px rgba(45, 125, 95, 0.15) !important;
}
/* Edit mode footer */
div.boxcart-order-modal .boxcart-order-modal__edit-footer {
justify-content: flex-end !important;
gap: 8px !important;
}
/* View mode footer */
div.boxcart-order-modal .boxcart-order-modal__view-footer {
justify-content: space-between;
}
/* ==========================================================================
Slot Selector Modal - Specific Styles
========================================================================== */
.boxcart-slot-modal .boxcart-form-group {
margin-bottom: 20px;
}
.boxcart-slot-modal .boxcart-form-group:last-child {
margin-bottom: 0;
}
/* Reduce spacing above footer in slot modal on mobile */
@media (max-width: 600px) {
.boxcart-slot-modal .boxcart-modal__body {
padding-bottom: 12px;
}
.boxcart-slot-modal .boxcart-modal__footer {
padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
}
}
.boxcart-slot-modal .boxcart-label {
display: block;
margin-bottom: 8px;
font-size: 14px;
font-weight: 600;
color: var(--boxcart-frontend-text);
}
/* Location Info */
.boxcart-location-info {
margin-top: 12px;
padding: 12px;
background: var(--boxcart-frontend-background-alt);
border-radius: var(--boxcart-frontend-radius-sm);
}
.boxcart-location-info__address {
font-size: 13px;
color: var(--boxcart-frontend-text-light);
}
.boxcart-location-info__instructions {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--boxcart-frontend-border);
font-size: 13px;
color: var(--boxcart-frontend-text-muted);
font-style: italic;
}
/* Time Slots Container for Slot Modal */
.boxcart-slots {
display: block;
}
/* Slot list inside modal should span full width */
.boxcart-slots .boxcart-checkout__slot-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.boxcart-slots .boxcart-slot {
width: 100%;
}
/* Loading State */
.boxcart-slot-modal__loading {
padding: 20px;
text-align: center;
font-size: 14px;
color: var(--boxcart-frontend-text-muted);
}
/* ==========================================================================
Slot Bar & Modal Responsive
========================================================================== */
@media (max-width: 600px) {
.boxcart-slot-bar {
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
gap: 8px 12px;
padding: 12px 16px;
}
/* Hide icon on mobile */
.boxcart-slot-bar__icon {
display: none;
}
.boxcart-slot-bar__info {
justify-content: flex-start;
text-align: left;
flex: 1;
min-width: 0;
}
.boxcart-slot-bar__text {
white-space: normal;
font-size: 13px;
}
/* Style as text link on mobile - inline with text */
.boxcart-products .boxcart-slot-bar__change,
.boxcart-slot-bar__change {
width: auto;
padding: 0 !important;
background: transparent !important;
border: none;
color: var(--boxcart-frontend-success-accent) !important;
font-size: 13px;
font-weight: var(--boxcart-btn-font-weight, 600);
text-decoration: underline;
flex-shrink: 0;
align-self: flex-start;
order: 1;
}
/* Countdown timer on mobile - below Change button */
.boxcart-slot-bar__countdown {
order: 2;
width: 100%;
text-align: right;
margin-top: -4px;
padding: 0;
font-size: 11px;
background: transparent;
}
.boxcart-products .boxcart-slot-bar__change:hover,
.boxcart-products .boxcart-slot-bar__change:focus,
.boxcart-slot-bar__change:hover,
.boxcart-slot-bar__change:focus {
background: transparent !important;
color: var(--boxcart-frontend-primary-hover, #246850) !important;
text-decoration: underline;
}
/* Empty/warning states - keep appropriate colors */
.boxcart-products .boxcart-slot-bar--empty .boxcart-slot-bar__change,
.boxcart-slot-bar--empty .boxcart-slot-bar__change {
background: transparent !important;
color: var(--boxcart-frontend-warning) !important;
}
.boxcart-products .boxcart-slot-bar--empty .boxcart-slot-bar__change:hover,
.boxcart-slot-bar--empty .boxcart-slot-bar__change:hover {
background: transparent !important;
color: #6b5003 !important;
}
.boxcart-products .boxcart-slot-bar--warning .boxcart-slot-bar__change,
.boxcart-slot-bar--warning .boxcart-slot-bar__change {
background: transparent !important;
color: var(--boxcart-frontend-error) !important;
}
.boxcart-products .boxcart-slot-bar--warning .boxcart-slot-bar__change:hover,
.boxcart-slot-bar--warning .boxcart-slot-bar__change:hover {
background: transparent !important;
color: #a33e3e !important;
}
.boxcart-modal {
max-width: 95%;
max-height: 90vh;
}
.boxcart-slots {
grid-template-columns: repeat(2, 1fr);
}
}
/* ==========================================================================
Reduced Motion
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ==========================================================================
Favourites
========================================================================== */
.boxcart-product-card {
position: relative;
}
.boxcart-product-card__favourite {
position: absolute;
top: 8px;
right: 8px;
z-index: 10;
width: 36px;
height: 36px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--boxcart-favourite-bg, rgba(255, 255, 255, 0.9));
color: #999;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
box-shadow: var(--boxcart-favourite-shadow, 0 2px 4px rgba(0, 0, 0, 0.1));
}
.boxcart-product-card__favourite:hover {
background: var(--boxcart-favourite-bg, rgba(255, 255, 255, 0.9));
color: var(--boxcart-favourite-colour, #E25555);
transform: scale(1.1);
}
.boxcart-product-card__favourite--active {
color: var(--boxcart-favourite-colour, #E25555);
background: var(--boxcart-favourite-bg, rgba(255, 255, 255, 0.9));
}
.boxcart-product-card__favourite--active .boxcart-product-card__favourite-icon {
fill: currentColor;
}
.boxcart-product-card__favourite-icon {
width: 20px;
height: 20px;
transition: fill 0.2s ease;
}
/* Favourite button — wrapper specificity beats theme button resets */
.boxcart-products .boxcart-product-card__favourite {
background: var(--boxcart-favourite-bg, rgba(255, 255, 255, 0.9));
box-shadow: var(--boxcart-favourite-shadow, 0 2px 4px rgba(0, 0, 0, 0.1));
}
.boxcart-products .boxcart-product-card__favourite:hover {
background: var(--boxcart-favourite-bg, rgba(255, 255, 255, 0.9));
}
.boxcart-products .boxcart-product-card__favourite--active {
background: var(--boxcart-favourite-bg, rgba(255, 255, 255, 0.9));
}
/* Favourites pill in category filter */
.boxcart-pill--favourites {
display: inline-flex;
align-items: center;
}
.boxcart-pill__count {
margin-left: 6px;
padding: 2px 6px;
font-size: 11px;
font-weight: 600;
background: rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.boxcart-pill--favourites.boxcart-pill--active .boxcart-pill__count {
background: rgba(255, 255, 255, 0.2);
}
/* ==========================================================================
Reorder Button
========================================================================== */
.boxcart-reorder-btn {
white-space: nowrap;
}
.boxcart-reorder-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* ==========================================================================
Order Modification
========================================================================== */
.boxcart-account__order-header {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
}
.boxcart-account__modify-notice {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
font-size: 13px;
color: #666;
background: #f8f9fa;
border-radius: 6px;
margin-bottom: 8px;
}
.boxcart-account__modify-notice svg {
flex-shrink: 0;
}
.boxcart-modify-order-btn {
white-space: nowrap;
}
.boxcart-account__modify-notice--expired {
color: #9ca3af;
background: #f3f4f6;
}
.boxcart-account__modify-notice--expired svg {
color: #9ca3af;
}
/* Disabled modify button with CSS tooltip. */
.boxcart-order-modal__modify.boxcart-btn--disabled,
.boxcart-modify-order-btn.boxcart-btn--disabled {
opacity: 0.6;
cursor: not-allowed;
position: relative;
}
.boxcart-order-modal__modify[data-tooltip],
.boxcart-modify-order-btn[data-tooltip] {
position: relative;
}
.boxcart-order-modal__modify[data-tooltip]::after,
.boxcart-modify-order-btn[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
padding: 8px 12px;
background: var(--boxcart-frontend-text-dark, #1f2937);
color: #fff;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
text-align: center;
white-space: nowrap;
border-radius: 6px;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease, visibility 0.15s ease;
pointer-events: none;
z-index: 10;
}
.boxcart-order-modal__modify[data-tooltip]:hover::after,
.boxcart-order-modal__modify[data-tooltip]:focus::after,
.boxcart-order-modal__modify[data-tooltip]:active::after,
.boxcart-modify-order-btn[data-tooltip]:hover::after,
.boxcart-modify-order-btn[data-tooltip]:focus::after,
.boxcart-modify-order-btn[data-tooltip]:active::after {
opacity: 1;
visibility: visible;
}
/* ==========================================================================
Login/Register Toggle & Passwordless
========================================================================== */
.boxcart-account--auth {
max-width: 480px;
margin: 0 auto;
}
.boxcart-account__auth-tabs {
display: flex;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 24px;
gap: 0;
}
.boxcart-account__auth-tab {
position: relative;
flex: 1;
padding: 14px 20px;
font-size: 15px;
font-weight: 500;
color: #666;
background: none !important;
border: none !important;
cursor: pointer;
transition: color 0.2s ease;
outline: none;
}
.boxcart-account__auth-tab:hover,
.boxcart-account__auth-tab:focus {
color: var(--boxcart-primary, #4a7c59) !important;
background: none !important;
outline: none;
}
.boxcart-account__auth-tab--active,
.boxcart-account__auth-tab--active:hover,
.boxcart-account__auth-tab--active:focus {
color: var(--boxcart-primary, #4a7c59) !important;
background: none !important;
}
.boxcart-account__auth-tab-indicator {
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 3px;
background: var(--boxcart-primary, #4a7c59);
border-radius: 3px 3px 0 0;
transform: scaleX(0);
transition: transform 0.2s ease;
}
.boxcart-account__auth-tab--active .boxcart-account__auth-tab-indicator {
transform: scaleX(1);
}
.boxcart-account__auth-wrapper {
position: relative;
}
.boxcart-account__auth-section {
transition: opacity 0.3s ease;
}
.boxcart-account__auth-section--hidden {
display: none;
}
/* Account Form Styles */
.boxcart-account .boxcart-account__reset-intro,
.boxcart-account__reset-intro {
margin: 0 0 20px 0 !important;
padding: 0;
color: var(--boxcart-frontend-text-light, #50575E);
font-size: 15px;
line-height: 1.5;
}
.boxcart-account__code-sent-message {
margin-bottom: 20px;
padding: 12px 16px;
background: #f0f7f0;
border-radius: 6px;
color: #333;
font-size: 14px;
}
.boxcart-account__reset-email-display {
display: block;
margin-top: 4px;
color: var(--boxcart-primary, #4a7c59);
}
.boxcart-form-field__input--code {
font-size: 24px;
font-family: monospace;
text-align: center;
letter-spacing: 8px;
padding: 16px;
}
.boxcart-link-btn {
padding: 0;
font-size: 14px;
color: var(--boxcart-primary, #4a7c59) !important;
background: none !important;
border: none !important;
cursor: pointer;
text-decoration: none;
outline: none;
font-family: inherit;
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.boxcart-link-btn:hover,
.boxcart-link-btn:focus {
color: var(--boxcart-primary-dark, #3d6349) !important;
background: none !important;
text-decoration: underline;
outline: none;
}
.boxcart-account__form-links {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px;
text-align: center;
}
/* Button states */
.boxcart-btn--loading {
position: relative;
pointer-events: none;
}
.boxcart-btn--loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border: 2px solid transparent;
border-top-color: currentColor;
border-radius: 50%;
animation: boxcart-spin 0.8s linear infinite;
}
@keyframes boxcart-spin {
to { transform: rotate(360deg); }
}
/* Responsive */
@media (max-width: 600px) {
.boxcart-account__order-header {
flex-direction: column;
}
.boxcart-account__order-actions {
width: 100%;
}
.boxcart-account__modify-notice {
width: 100%;
}
.boxcart-modify-order-btn {
width: 100%;
}
.boxcart-form-field__input--code {
letter-spacing: 4px;
}
}
/* ==========================================================================
Toast Notifications
========================================================================== */
.boxcart-toast-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999999;
display: flex;
flex-direction: column;
gap: 8px;
}
.boxcart-toast {
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
animation: boxcart-toast-in 0.3s ease;
max-width: 320px;
}
.boxcart-toast--success {
background: var(--boxcart-toast-success, #28a745);
}
.boxcart-toast--error {
background: var(--boxcart-toast-error, #dc3545);
}
.boxcart-toast--info {
background: var(--boxcart-toast-info, #17a2b8);
}
.boxcart-toast--warning {
background: var(--boxcart-toast-warning, #ffc107);
color: #333;
}
.boxcart-toast--hiding {
animation: boxcart-toast-out 0.3s ease forwards;
}
@keyframes boxcart-toast-in {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes boxcart-toast-out {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(20px);
}
}
@media (max-width: 600px) {
.boxcart-toast-container {
left: 10px;
right: 10px;
bottom: 10px;
}
.boxcart-toast {
max-width: none;
}
}
/* ==========================================================================
Account Dashboard - Favourites Section
========================================================================== */
.boxcart-account__favourites-section {
margin-bottom: 24px;
}
.boxcart-account__favourites-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 12px;
}
.boxcart-account__favourite-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 8px;
background: #f8f9fa;
border-radius: 8px;
transition: background 0.2s ease;
}
.boxcart-account__favourite-item:hover {
background: #f0f0f0;
}
.boxcart-account__favourite-image {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 6px;
margin-bottom: 6px;
}
.boxcart-account__favourite-placeholder {
width: 60px;
height: 60px;
background: #e0e0e0;
border-radius: 6px;
margin-bottom: 6px;
}
.boxcart-account__favourite-name {
font-size: 12px;
font-weight: 500;
color: #333;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.boxcart-account__favourite-item--more {
display: flex;
align-items: center;
justify-content: center;
min-height: 90px;
}
.boxcart-account__favourite-more {
font-size: 14px;
font-weight: 500;
color: var(--boxcart-primary, #4a7c59);
text-decoration: none;
}
.boxcart-account__favourites-hint {
font-size: 13px;
color: #888;
margin: 0;
}
.boxcart-account__empty-favourites {
display: flex;
flex-direction: column;
align-items: center;
padding: 24px;
text-align: center;
background: #f8f9fa;
border-radius: 8px;
color: #888;
}
.boxcart-account__empty-favourites svg {
margin-bottom: 12px;
color: #ccc;
}
.boxcart-account__empty-favourites p {
margin: 0 0 12px;
font-size: 14px;
}
/* Favourites Table - wrapper specificity to override theme styles */
.boxcart-account .boxcart-account__favourites-table-wrapper {
overflow-x: auto;
}
.boxcart-account .boxcart-account__favourites-table-wrapper table.boxcart-account__favourites-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: transparent;
}
.boxcart-account .boxcart-account__favourites-table-wrapper table.boxcart-account__favourites-table thead,
.boxcart-account .boxcart-account__favourites-table-wrapper table.boxcart-account__favourites-table thead tr {
background: transparent;
}
.boxcart-account .boxcart-account__favourites-table-wrapper table.boxcart-account__favourites-table thead tr th {
text-align: left;
font-size: 12px;
font-weight: 600;
color: var(--boxcart-frontend-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 8px 12px;
border-bottom: 1px solid var(--boxcart-frontend-border-light);
border-top: none;
border-left: none;
border-right: none;
background: transparent;
}
.boxcart-account .boxcart-account__favourites-table-wrapper table.boxcart-account__favourites-table thead tr th:first-child {
padding-left: 0;
}
.boxcart-account .boxcart-account__favourites-table-wrapper table.boxcart-account__favourites-table thead tr th:last-child {
padding-right: 0;
}
.boxcart-account .boxcart-account__favourites-table-wrapper table.boxcart-account__favourites-table tbody tr td {
padding: 12px;
border-bottom: 1px solid var(--boxcart-frontend-border-light);
border-top: none;
border-left: none;
border-right: none;
font-size: 14px;
color: var(--boxcart-frontend-text);
background: transparent;
vertical-align: middle;
}
.boxcart-account .boxcart-account__favourites-table-wrapper table.boxcart-account__favourites-table tbody tr td:first-child {
padding-left: 0;
}
.boxcart-account .boxcart-account__favourites-table-wrapper table.boxcart-account__favourites-table tbody tr td:last-child {
padding-right: 0;
}
.boxcart-account .boxcart-account__favourites-table-wrapper table.boxcart-account__favourites-table tbody tr:last-child td {
border-bottom: none;
}
.boxcart-account .boxcart-account__favourites-table-wrapper th.boxcart-account__favourites-th-action {
width: 50px;
}
.boxcart-account__favourites-product {
display: flex;
align-items: center;
gap: 12px;
}
.boxcart-account__favourites-image {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: var(--boxcart-frontend-radius-sm);
}
.boxcart-account__favourites-placeholder {
width: 40px;
height: 40px;
background: var(--boxcart-frontend-background-alt);
border-radius: var(--boxcart-frontend-radius-sm);
}
.boxcart-account__favourites-name {
font-weight: 500;
}
.boxcart-account .boxcart-account__favourites-table-wrapper td.boxcart-account__favourites-td-price {
white-space: nowrap;
}
.boxcart-account .boxcart-account__favourites-table-wrapper td.boxcart-account__favourites-td-action {
text-align: right;
}
.boxcart-account .boxcart-account__favourites-table-wrapper button.boxcart-account__favourite-remove {
background: none;
border: none;
padding: 6px;
cursor: pointer;
color: var(--boxcart-favourite-colour, #E25555);
transition: opacity 0.15s ease;
}
.boxcart-account .boxcart-account__favourites-table-wrapper button.boxcart-account__favourite-remove:hover {
opacity: 0.7;
}
/* Account Details Grid */
.boxcart-account__details-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.boxcart-account__details-block {
min-width: 0;
}
.boxcart-account__details-block-title {
font-size: 13px;
font-weight: 600;
color: var(--boxcart-frontend-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 12px 0;
}
.boxcart-account__address {
font-style: normal;
font-size: 14px;
color: var(--boxcart-frontend-text);
line-height: 1.5;
}
.boxcart-account__address-empty {
font-size: 14px;
color: var(--boxcart-frontend-text-muted);
margin: 0;
}
/* Security Section */
.boxcart-account__security-section {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.boxcart-account__security-section .boxcart-account__section-header {
width: 100%;
}
.boxcart-account__security-text {
font-size: 14px;
color: var(--boxcart-frontend-text-muted);
margin: 0 0 16px 0;
}
/* Logout Section */
.boxcart-account__logout-section {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--boxcart-frontend-border-light);
text-align: center;
}
/* Account action buttons - branded secondary style */
.boxcart-account .boxcart-account__action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 20px;
font-size: 14px;
font-weight: var(--boxcart-btn-font-weight, 600);
border-radius: var(--boxcart-btn-radius, var(--boxcart-frontend-radius));
cursor: pointer;
transition: all var(--boxcart-frontend-transition);
text-decoration: none;
background: var(--boxcart-btn-secondary-bg, #ffffff);
color: var(--boxcart-btn-secondary-text, var(--boxcart-frontend-text));
border: 1px solid var(--boxcart-frontend-border);
}
.boxcart-account .boxcart-account__action-btn:hover {
background: var(--boxcart-btn-secondary-bg-hover, #f6f7f7);
border-color: var(--boxcart-frontend-border-light);
}
/* Logout button - styled like secondary but with warning hover */
.boxcart-account .boxcart-account__logout-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 24px;
font-size: 14px;
font-weight: var(--boxcart-btn-font-weight, 600);
border-radius: var(--boxcart-btn-radius, var(--boxcart-frontend-radius));
cursor: pointer;
transition: all var(--boxcart-frontend-transition);
text-decoration: none;
background: var(--boxcart-btn-secondary-bg, #ffffff);
color: var(--boxcart-frontend-text-muted);
border: 1px solid var(--boxcart-frontend-border);
}
.boxcart-account .boxcart-account__logout-btn:hover {
color: var(--boxcart-frontend-error);
border-color: var(--boxcart-frontend-error);
background: var(--boxcart-frontend-error-light);
}
/* Reorder Confirmation Modal */
.boxcart-reorder-modal {
position: fixed;
inset: 0;
z-index: 10002;
display: none;
}
.boxcart-reorder-modal.is-visible {
display: block;
}
.boxcart-reorder-modal .boxcart-modal__overlay {
position: absolute;
inset: 0;
background: var(--boxcart-modal-overlay-bg, rgba(0, 0, 0, 0.5));
}
.boxcart-reorder-modal .boxcart-modal__container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--boxcart-frontend-background);
border-radius: var(--boxcart-frontend-radius-lg);
box-shadow: var(--boxcart-modal-shadow, 0 20px 60px rgba(0, 0, 0, 0.2));
width: calc(100% - 40px);
max-width: 420px;
}
.boxcart-reorder-modal__message {
font-size: 15px;
color: var(--boxcart-frontend-text);
margin: 0;
line-height: 1.5;
}
.boxcart-reorder-modal__footer {
display: flex;
gap: 12px;
justify-content: flex-end;
}
.boxcart-modal__container--small {
max-width: 420px;
}
/* ==========================================================================
Account Modals - High specificity to override themes
========================================================================== */
/* Modal base - fixed fullscreen with high z-index */
div.boxcart-modal.boxcart-order-modal,
div.boxcart-modal.boxcart-reorder-modal,
div.boxcart-modal.boxcart-edit-modal,
div.boxcart-modal.boxcart-password-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 999999 !important;
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
div.boxcart-modal.boxcart-order-modal.is-visible,
div.boxcart-modal.boxcart-reorder-modal.is-visible,
div.boxcart-modal.boxcart-edit-modal.is-visible,
div.boxcart-modal.boxcart-password-modal.is-visible {
display: block !important;
}
/* Overlay - fullscreen dark backdrop */
div.boxcart-modal.boxcart-order-modal > div.boxcart-modal__overlay,
div.boxcart-modal.boxcart-reorder-modal > div.boxcart-modal__overlay,
div.boxcart-modal.boxcart-edit-modal > div.boxcart-modal__overlay,
div.boxcart-modal.boxcart-password-modal > div.boxcart-modal__overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
background: var(--boxcart-modal-overlay-bg, rgba(0, 0, 0, 0.5)) !important;
z-index: 1 !important;
}
/* Container - centered modal box */
div.boxcart-modal.boxcart-order-modal > div.boxcart-modal__container,
div.boxcart-modal.boxcart-reorder-modal > div.boxcart-modal__container,
div.boxcart-modal.boxcart-edit-modal > div.boxcart-modal__container,
div.boxcart-modal.boxcart-password-modal > div.boxcart-modal__container {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
background: var(--boxcart-frontend-background, #ffffff) !important;
border-radius: var(--boxcart-frontend-radius-lg, 12px) !important;
box-shadow: var(--boxcart-modal-shadow, 0 20px 60px rgba(0, 0, 0, 0.3)) !important;
width: calc(100% - 40px) !important;
max-width: 500px !important;
max-height: calc(100vh - 40px) !important;
max-height: calc(100dvh - 40px) !important;
display: flex !important;
flex-direction: column !important;
z-index: 2 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Modal header */
div.boxcart-modal.boxcart-order-modal div.boxcart-modal__header,
div.boxcart-modal.boxcart-reorder-modal div.boxcart-modal__header,
div.boxcart-modal.boxcart-edit-modal div.boxcart-modal__header,
div.boxcart-modal.boxcart-password-modal div.boxcart-modal__header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 20px !important;
border-bottom: 1px solid #e5e5e5 !important;
margin: 0 !important;
}
div.boxcart-modal.boxcart-order-modal h3.boxcart-modal__title,
div.boxcart-modal.boxcart-reorder-modal h3.boxcart-modal__title,
div.boxcart-modal.boxcart-edit-modal h3.boxcart-modal__title,
div.boxcart-modal.boxcart-password-modal h3.boxcart-modal__title {
font-size: 18px !important;
font-weight: 600 !important;
color: #1e1e1e !important;
margin: 0 !important;
padding: 0 !important;
}
div.boxcart-modal.boxcart-order-modal button.boxcart-modal__close,
div.boxcart-modal.boxcart-reorder-modal button.boxcart-modal__close,
div.boxcart-modal.boxcart-edit-modal button.boxcart-modal__close,
div.boxcart-modal.boxcart-password-modal button.boxcart-modal__close {
background: none !important;
border: none !important;
padding: 4px !important;
cursor: pointer !important;
color: var(--boxcart-frontend-text-muted, #787c82) !important;
line-height: 1 !important;
}
div.boxcart-modal.boxcart-order-modal button.boxcart-modal__close:hover,
div.boxcart-modal.boxcart-reorder-modal button.boxcart-modal__close:hover,
div.boxcart-modal.boxcart-edit-modal button.boxcart-modal__close:hover,
div.boxcart-modal.boxcart-password-modal button.boxcart-modal__close:hover {
color: #1e1e1e !important;
}
/* Modal body */
div.boxcart-modal.boxcart-order-modal div.boxcart-modal__body,
div.boxcart-modal.boxcart-reorder-modal div.boxcart-modal__body,
div.boxcart-modal.boxcart-edit-modal div.boxcart-modal__body,
div.boxcart-modal.boxcart-password-modal div.boxcart-modal__body {
padding: 20px !important;
overflow-y: auto !important;
flex: 1 !important;
}
/* Modal footer */
div.boxcart-modal.boxcart-order-modal div.boxcart-modal__footer,
div.boxcart-modal.boxcart-reorder-modal div.boxcart-modal__footer,
div.boxcart-modal.boxcart-edit-modal div.boxcart-modal__footer,
div.boxcart-modal.boxcart-password-modal div.boxcart-modal__footer {
display: flex !important;
justify-content: flex-end !important;
gap: 12px !important;
padding: 16px 20px !important;
border-top: 1px solid #e5e5e5 !important;
background: #f9f9f9 !important;
border-radius: 0 0 12px 12px !important;
}
/* Order modal footer visibility: edit footer hidden by default, shown when editing.
These rules MUST come after the generic modal footer display:flex rule above. */
div.boxcart-modal.boxcart-order-modal div.boxcart-modal__footer.boxcart-order-modal__edit-footer {
display: none !important;
}
div.boxcart-modal.boxcart-order-modal.boxcart-order-modal--editing div.boxcart-modal__footer.boxcart-order-modal__edit-footer {
display: flex !important;
}
div.boxcart-modal.boxcart-order-modal.boxcart-order-modal--editing div.boxcart-modal__footer.boxcart-order-modal__view-footer {
display: none !important;
}
/* Modal footer buttons */
div.boxcart-modal.boxcart-order-modal div.boxcart-modal__footer button.boxcart-btn,
div.boxcart-modal.boxcart-reorder-modal div.boxcart-modal__footer button.boxcart-btn,
div.boxcart-modal.boxcart-edit-modal div.boxcart-modal__footer button.boxcart-btn,
div.boxcart-modal.boxcart-password-modal div.boxcart-modal__footer button.boxcart-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 10px 20px !important;
font-size: 14px !important;
font-weight: var(--boxcart-btn-font-weight, 600) !important;
border-radius: var(--boxcart-btn-radius, var(--boxcart-frontend-radius-sm)) !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
text-decoration: none !important;
}
div.boxcart-modal.boxcart-order-modal div.boxcart-modal__footer button.boxcart-btn--secondary,
div.boxcart-modal.boxcart-reorder-modal div.boxcart-modal__footer button.boxcart-btn--secondary,
div.boxcart-modal.boxcart-edit-modal div.boxcart-modal__footer button.boxcart-btn--secondary,
div.boxcart-modal.boxcart-password-modal div.boxcart-modal__footer button.boxcart-btn--secondary {
background: var(--boxcart-btn-secondary-bg, #ffffff) !important;
color: var(--boxcart-btn-secondary-text, var(--boxcart-frontend-text, #2c3338)) !important;
border: var(--boxcart-btn-secondary-border, 1px solid #dcdcde) !important;
}
div.boxcart-modal.boxcart-order-modal div.boxcart-modal__footer button.boxcart-btn--secondary:hover,
div.boxcart-modal.boxcart-reorder-modal div.boxcart-modal__footer button.boxcart-btn--secondary:hover,
div.boxcart-modal.boxcart-edit-modal div.boxcart-modal__footer button.boxcart-btn--secondary:hover,
div.boxcart-modal.boxcart-password-modal div.boxcart-modal__footer button.boxcart-btn--secondary:hover {
background: var(--boxcart-btn-secondary-bg-hover, #f6f7f7) !important;
color: var(--boxcart-btn-secondary-hover-text, var(--boxcart-btn-secondary-text, var(--boxcart-frontend-text))) !important;
border: var(--boxcart-btn-secondary-hover-border, 1px solid #c3c4c7) !important;
}
div.boxcart-modal.boxcart-order-modal div.boxcart-modal__footer button.boxcart-btn--primary,
div.boxcart-modal.boxcart-reorder-modal div.boxcart-modal__footer button.boxcart-btn--primary,
div.boxcart-modal.boxcart-edit-modal div.boxcart-modal__footer button.boxcart-btn--primary,
div.boxcart-modal.boxcart-password-modal div.boxcart-modal__footer button.boxcart-btn--primary {
background: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary, #2D7D5F)) !important;
color: var(--boxcart-btn-primary-text, #ffffff) !important;
border: var(--boxcart-btn-primary-border, none) !important;
}
div.boxcart-modal.boxcart-order-modal div.boxcart-modal__footer button.boxcart-btn--primary:hover,
div.boxcart-modal.boxcart-reorder-modal div.boxcart-modal__footer button.boxcart-btn--primary:hover,
div.boxcart-modal.boxcart-edit-modal div.boxcart-modal__footer button.boxcart-btn--primary:hover,
div.boxcart-modal.boxcart-password-modal div.boxcart-modal__footer button.boxcart-btn--primary:hover {
background: var(--boxcart-btn-primary-bg-hover, var(--boxcart-frontend-primary-hover, #246850)) !important;
color: var(--boxcart-btn-primary-hover-text, var(--boxcart-btn-primary-text, #ffffff)) !important;
border: var(--boxcart-btn-primary-hover-border, var(--boxcart-btn-primary-border, none)) !important;
}
/* Hidden button utility (overrides inline-flex !important on modal buttons). */
div.boxcart-modal div.boxcart-modal__footer button.boxcart-btn.boxcart-btn--hidden {
display: none !important;
}
/* Modal Form Styles */
div.boxcart-modal form.boxcart-modal-form {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
div.boxcart-modal div.boxcart-modal-form__row {
display: flex !important;
gap: 12px !important;
}
div.boxcart-modal div.boxcart-modal-form__row > div.boxcart-modal-form__field {
flex: 1 !important;
}
div.boxcart-modal div.boxcart-modal-form__field {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
div.boxcart-modal label.boxcart-modal-form__label {
font-size: 13px !important;
font-weight: 500 !important;
color: var(--boxcart-frontend-text, #2c3338) !important;
margin: 0 !important;
}
div.boxcart-modal input.boxcart-modal-form__input {
padding: 10px 12px !important;
font-size: 14px !important;
border: 1px solid #dcdcde !important;
border-radius: 6px !important;
background: #ffffff !important;
color: var(--boxcart-frontend-text, #2c3338) !important;
transition: border-color 0.15s ease !important;
width: 100% !important;
box-sizing: border-box !important;
font-family: inherit !important;
}
div.boxcart-modal input.boxcart-modal-form__input:focus {
outline: none !important;
border-color: var(--boxcart-frontend-primary, #2D7D5F) !important;
box-shadow: 0 0 0 1px var(--boxcart-frontend-primary, #2D7D5F) !important;
}
div.boxcart-modal div.boxcart-modal-form__section {
padding-top: 16px !important;
border-top: 1px solid #e5e5e5 !important;
margin-top: 4px !important;
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
div.boxcart-modal h4.boxcart-modal-form__section-title {
font-size: 13px !important;
font-weight: 600 !important;
color: var(--boxcart-frontend-text-muted, #787c82) !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
margin: 0 !important;
padding: 0 !important;
}
div.boxcart-modal p.boxcart-modal-form__hint {
font-size: 12px !important;
color: var(--boxcart-frontend-text-muted, #787c82) !important;
margin: 4px 0 0 0 !important;
}
/* Responsive */
@media (max-width: 768px) {
.boxcart-account__details-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.boxcart-account__favourites-th-price,
.boxcart-account__favourites-td-price {
display: none;
}
}
@media (max-width: 480px) {
.boxcart-account__favourites-grid {
grid-template-columns: repeat(2, 1fr);
}
.boxcart-reorder-modal__footer {
flex-direction: column;
}
.boxcart-reorder-modal__footer .boxcart-btn {
width: 100%;
}
div.boxcart-modal div.boxcart-modal-form__row {
flex-direction: column !important;
}
div.boxcart-modal.boxcart-order-modal > div.boxcart-modal__container,
div.boxcart-modal.boxcart-reorder-modal > div.boxcart-modal__container,
div.boxcart-modal.boxcart-edit-modal > div.boxcart-modal__container,
div.boxcart-modal.boxcart-password-modal > div.boxcart-modal__container {
width: 100% !important;
max-width: 100% !important;
max-height: 90vh !important;
max-height: 90dvh !important;
top: auto !important;
bottom: 0 !important;
transform: translateX(-50%) !important;
border-radius: 12px 12px 0 0 !important;
padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
}
/* ==========================================================================
Link Button (styled like a link but is a button) - Additional overrides
========================================================================== */
/* Additional theme isolation for link buttons */
.boxcart-account .boxcart-link-btn,
.boxcart-checkout .boxcart-link-btn,
.boxcart-products .boxcart-link-btn {
background: none !important;
border: none !important;
padding: 0;
font: inherit;
color: var(--boxcart-primary, #4a7c59) !important;
cursor: pointer;
text-decoration: none;
outline: none;
box-shadow: none !important;
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.boxcart-account .boxcart-link-btn:hover,
.boxcart-account .boxcart-link-btn:focus,
.boxcart-account .boxcart-link-btn:active,
.boxcart-checkout .boxcart-link-btn:hover,
.boxcart-checkout .boxcart-link-btn:focus,
.boxcart-checkout .boxcart-link-btn:active,
.boxcart-products .boxcart-link-btn:hover,
.boxcart-products .boxcart-link-btn:focus,
.boxcart-products .boxcart-link-btn:active {
color: var(--boxcart-primary-dark, #3d6349) !important;
background: none !important;
text-decoration: underline;
outline: none;
box-shadow: none !important;
}
/* ==========================================================================
Password Reset Form
========================================================================== */
.boxcart-account__reset-form {
max-width: 480px;
margin: 0 auto;
}
.boxcart-account__reset-title {
font-size: 22px;
font-weight: 600;
margin: 0 0 24px;
color: var(--boxcart-frontend-text-dark, #1E1E1E);
text-align: center;
}
.boxcart-account__reset-email-display {
display: block;
margin-top: 4px;
color: var(--boxcart-primary, #4a7c59);
}
/* ==========================================================================
Product Card - Custom Quantity Types
========================================================================== */
/* Price with unit label */
.boxcart-product-card__price--per-unit {
display: flex;
align-items: baseline;
gap: 4px;
flex-wrap: wrap;
}
.boxcart-product-card__price-amount {
font-weight: 600;
font-size: 18px;
color: var(--boxcart-frontend-text-dark);
}
.boxcart-product-card__price-unit {
font-size: 13px;
color: var(--boxcart-frontend-text-muted);
font-weight: 400;
}
/* Basket items section on product card - overlay on image */
.boxcart-product-card__basket-items {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: var(--boxcart-card-overlay-bg, rgba(0, 0, 0, 0.8));
padding: 8px 12px;
margin: 0;
border-radius: 0;
z-index: 5;
}
.boxcart-product-card__basket-label {
font-size: 11px;
font-weight: 500;
color: var(--boxcart-card-overlay-text, #ffffff);
opacity: 0.8;
margin-bottom: 4px;
display: block;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.boxcart-product-card__basket-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.boxcart-product-card__basket-item {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
color: var(--boxcart-card-overlay-text, #ffffff);
}
.boxcart-product-card__basket-qty {
font-weight: 600;
color: var(--boxcart-card-overlay-text, #ffffff);
}
.boxcart-product-card__basket-subtotal {
color: var(--boxcart-card-overlay-text, #ffffff);
opacity: 0.9;
font-weight: 500;
}
/* Empty basket state for card view */
.boxcart-product-card__basket-items:not(.boxcart-product-card__basket-items--has-items) {
background: var(--boxcart-card-overlay-bg, rgba(0, 0, 0, 0.5));
opacity: 0.6;
}
.boxcart-product-card__basket-items:not(.boxcart-product-card__basket-items--has-items) .boxcart-product-card__basket-label {
color: var(--boxcart-card-overlay-text, #ffffff);
opacity: 0.5;
}
.boxcart-product-card__basket-item--empty .boxcart-product-card__basket-qty,
.boxcart-product-card__basket-item--empty .boxcart-product-card__basket-subtotal {
color: var(--boxcart-card-overlay-text, #ffffff);
opacity: 0.5;
}
.boxcart-product-card__add-more {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 8px;
padding: 0;
background: none;
border: none;
color: var(--boxcart-frontend-primary);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: color var(--boxcart-frontend-transition);
}
.boxcart-product-card__add-more:hover {
color: var(--boxcart-frontend-primary-hover);
}
/* Quantity Tabs Scroll Container - wrapper for fade indicators on product cards */
.boxcart-qty-tabs-container {
position: relative;
margin-bottom: 12px;
}
/* Fade indicators for scrollable qty tabs */
.boxcart-qty-tabs-container::before,
.boxcart-qty-tabs-container::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 24px;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 1;
}
.boxcart-qty-tabs-container::before {
left: 0;
background: linear-gradient(to right, var(--boxcart-frontend-background) 0%, transparent 100%);
}
.boxcart-qty-tabs-container::after {
right: 0;
background: linear-gradient(to left, var(--boxcart-frontend-background) 0%, transparent 100%);
}
/* Show fades based on scroll position - controlled via JS data attributes */
.boxcart-qty-tabs-container[data-scroll-left="true"]::before {
opacity: 1;
}
.boxcart-qty-tabs-container[data-scroll-right="true"]::after {
opacity: 1;
}
/* Quantity type tabs - matches table view unit button style */
/* Scrollable on all screen sizes to handle many unit options */
.boxcart-qty-tabs {
display: flex;
gap: 4px;
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-behavior: smooth;
/* Drag-to-scroll cursor for desktop */
cursor: grab;
user-select: none;
}
.boxcart-qty-tabs.is-dragging {
cursor: grabbing;
scroll-behavior: auto;
}
.boxcart-qty-tabs::-webkit-scrollbar {
display: none;
}
.boxcart-qty-tabs .boxcart-qty-tab {
flex-shrink: 0;
/* Inherit grab cursor from parent for consistent UX */
cursor: inherit;
}
/* Show grabbing cursor when dragging */
.boxcart-qty-tabs.is-dragging .boxcart-qty-tab {
cursor: grabbing;
}
/* Qty tab - wrapper specificity to override theme styles */
.boxcart-products .boxcart-product-card button.boxcart-qty-tab {
padding: 4px 12px;
border: 1px solid var(--boxcart-qty-tab-border, var(--boxcart-frontend-border));
background: var(--boxcart-qty-tab-bar-bg, var(--boxcart-frontend-background));
background-color: var(--boxcart-qty-tab-bar-bg, var(--boxcart-frontend-background));
border-radius: var(--boxcart-qty-tab-radius, var(--boxcart-frontend-radius-sm));
font-size: 11px;
font-weight: 600;
color: var(--boxcart-qty-tab-inactive-text, var(--boxcart-frontend-text-muted));
cursor: grab; /* Show grab cursor on buttons */
text-align: center;
transition: all var(--boxcart-frontend-transition);
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
box-shadow: none;
}
.boxcart-products .boxcart-product-card button.boxcart-qty-tab:focus,
.boxcart-products .boxcart-product-card button.boxcart-qty-tab:focus-visible {
outline: none;
border-color: var(--boxcart-frontend-primary);
box-shadow: none;
}
.boxcart-products .boxcart-product-card button.boxcart-qty-tab:focus:not(:focus-visible) {
outline: none;
}
.boxcart-products .boxcart-product-card button.boxcart-qty-tab:hover:not(:disabled) {
border-color: var(--boxcart-frontend-primary);
color: var(--boxcart-qty-tab-hover-text, var(--boxcart-frontend-primary));
background: var(--boxcart-qty-tab-hover-bg, var(--boxcart-frontend-background));
background-color: var(--boxcart-qty-tab-hover-bg, var(--boxcart-frontend-background));
}
.boxcart-products .boxcart-product-card button.boxcart-qty-tab:active {
background: var(--boxcart-qty-tab-bar-bg, var(--boxcart-frontend-background));
background-color: var(--boxcart-qty-tab-bar-bg, var(--boxcart-frontend-background));
font-family: inherit;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--boxcart-qty-tab-inactive-text, var(--boxcart-frontend-text-muted));
border-color: var(--boxcart-frontend-primary);
box-shadow: none;
outline: none;
}
.boxcart-products .boxcart-product-card button.boxcart-qty-tab.boxcart-qty-tab--active,
.boxcart-products .boxcart-product-card button.boxcart-qty-tab.boxcart-qty-tab--active:hover,
.boxcart-products .boxcart-product-card button.boxcart-qty-tab.boxcart-qty-tab--active:focus,
.boxcart-products .boxcart-product-card button.boxcart-qty-tab.boxcart-qty-tab--active:active {
background: var(--boxcart-qty-tab-active-bg, var(--boxcart-frontend-primary));
background-color: var(--boxcart-qty-tab-active-bg, var(--boxcart-frontend-primary));
border-color: var(--boxcart-qty-tab-active-border, var(--boxcart-qty-tab-active-bg, var(--boxcart-frontend-primary)));
color: var(--boxcart-qty-tab-active-text, #ffffff);
box-shadow: none;
}
/* Single quantity type - keep left aligned (same as multiple) */
.boxcart-qty-tabs--single {
justify-content: flex-start;
}
.boxcart-products .boxcart-product-card .boxcart-qty-tabs--single button.boxcart-qty-tab {
cursor: default;
}
/* Quantity type panels */
.boxcart-qty-panels {
position: relative;
}
.boxcart-qty-panel {
display: none;
opacity: 0;
transition: opacity 0.15s ease-in-out;
}
.boxcart-qty-panel--active {
display: block;
opacity: 1;
}
/* Transition animation when switching tabs */
.boxcart-qty-panel--fading-out {
display: block;
opacity: 0;
}
.boxcart-qty-panel--fading-in {
display: block;
opacity: 1;
}
/* Step selector for decimal quantities - matches table view style */
.boxcart-step-selector {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
margin-bottom: 10px;
}
.boxcart-step-selector__btn {
width: 36px;
height: 36px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--boxcart-qty-button-bg, #f3f4f6);
border: 1px solid var(--boxcart-qty-button-border, var(--boxcart-frontend-border-light));
border-radius: var(--boxcart-qty-button-radius, var(--boxcart-frontend-radius-sm));
font-size: 18px;
font-weight: 500;
color: var(--boxcart-qty-button-text, #374151);
cursor: pointer;
transition: all var(--boxcart-frontend-transition);
line-height: 1;
/* Prevent browser default styling */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
}
.boxcart-step-selector__btn--minus {
border-radius: var(--boxcart-qty-button-radius, var(--boxcart-frontend-radius-sm));
}
.boxcart-step-selector__btn--plus {
border-radius: var(--boxcart-qty-button-radius, var(--boxcart-frontend-radius-sm));
}
.boxcart-step-selector__btn:hover:not(:disabled) {
border-color: var(--boxcart-frontend-primary);
color: var(--boxcart-qty-button-text, #374151);
background: var(--boxcart-qty-button-hover-bg, #e5e7eb);
}
.boxcart-step-selector__btn:focus {
outline: none;
border-color: var(--boxcart-frontend-primary);
box-shadow: none;
}
.boxcart-step-selector__btn:focus:not(:focus-visible) {
outline: none;
border-color: var(--boxcart-frontend-border-light);
box-shadow: none;
}
.boxcart-step-selector__btn:focus-visible {
outline: none;
border-color: var(--boxcart-frontend-primary);
box-shadow: none;
}
/* Step selector focus - wrapper specificity */
.boxcart-products .boxcart-step-selector button.boxcart-step-selector__btn:focus,
.boxcart-sidecart .boxcart-step-selector button.boxcart-step-selector__btn:focus {
outline: none;
border-color: var(--boxcart-frontend-primary);
}
.boxcart-products .boxcart-step-selector button.boxcart-step-selector__btn:focus:not(:focus-visible),
.boxcart-sidecart .boxcart-step-selector button.boxcart-step-selector__btn:focus:not(:focus-visible) {
outline: none;
}
.boxcart-products .boxcart-step-selector button.boxcart-step-selector__btn:focus-visible,
.boxcart-sidecart .boxcart-step-selector button.boxcart-step-selector__btn:focus-visible {
outline: none;
border-color: var(--boxcart-frontend-primary);
}
.boxcart-step-selector__btn:disabled {
opacity: 0.5;
cursor: not-allowed;
color: var(--boxcart-frontend-text-muted);
background: var(--boxcart-frontend-background);
border-color: var(--boxcart-qty-button-border, var(--boxcart-frontend-border-light));
}
.boxcart-step-selector__center {
flex: 1;
min-width: 60px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 0 8px;
border: 1px solid var(--boxcart-qty-button-border, var(--boxcart-frontend-border-light));
border-radius: var(--boxcart-qty-button-radius, var(--boxcart-frontend-radius-sm));
background: var(--boxcart-frontend-background);
}
.boxcart-step-selector__value {
font-size: 14px;
font-weight: 600;
color: var(--boxcart-qty-value-text, var(--boxcart-frontend-text));
text-align: center;
}
input.boxcart-step-selector__value {
border: none;
background: transparent;
padding: 0;
width: auto;
min-width: 20px;
max-width: 60px;
flex: 0 1 auto;
outline: none;
box-shadow: none;
-moz-appearance: textfield;
-webkit-appearance: none;
appearance: none;
}
.boxcart-step-selector__unit {
font-size: 12px;
font-weight: 500;
color: var(--boxcart-frontend-text-muted);
text-transform: capitalize;
}
.boxcart-step-selector__input {
width: 60px;
min-width: 60px;
max-width: 60px;
height: 36px;
padding: 0 8px;
border: 1px solid var(--boxcart-frontend-border-light);
border-radius: var(--boxcart-frontend-radius-sm);
background: var(--boxcart-frontend-background);
text-align: center;
font-size: 14px;
font-weight: 600;
color: var(--boxcart-frontend-text);
}
.boxcart-step-selector__input:focus {
outline: none;
border-color: var(--boxcart-frontend-primary);
box-shadow: none;
}
/* Calculated price display */
.boxcart-calculated-price {
font-size: 14px;
color: var(--boxcart-frontend-text-muted);
margin-bottom: 10px;
text-align: center;
}
.boxcart-calculated-price__amount {
font-weight: 600;
color: var(--boxcart-frontend-text);
}
/* Quantity selector form wrapper */
.boxcart-qty-selector {
padding-top: 8px;
}
.boxcart-qty-selector__price-row {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 10px;
}
.boxcart-qty-selector__unit-price {
font-size: 13px;
color: var(--boxcart-qty-price-accent, var(--boxcart-frontend-primary));
}
/* Standard quantity selector (whole numbers) - matches table view style */
.boxcart-standard-selector {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
margin-bottom: 10px;
}
.boxcart-standard-selector__btn {
width: 36px;
height: 36px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--boxcart-qty-button-bg, #f3f4f6);
border: 1px solid var(--boxcart-qty-button-border, var(--boxcart-frontend-border-light));
border-radius: var(--boxcart-qty-button-radius, var(--boxcart-frontend-radius-sm));
font-size: 18px;
font-weight: 500;
color: var(--boxcart-qty-button-text, #374151);
cursor: pointer;
transition: all var(--boxcart-frontend-transition);
line-height: 1;
/* Prevent browser default styling */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
}
.boxcart-standard-selector__btn--minus {
border-radius: var(--boxcart-qty-button-radius, var(--boxcart-frontend-radius-sm));
}
.boxcart-standard-selector__btn--plus {
border-radius: var(--boxcart-qty-button-radius, var(--boxcart-frontend-radius-sm));
}
.boxcart-standard-selector__btn:hover:not(:disabled) {
border-color: var(--boxcart-frontend-primary);
color: var(--boxcart-qty-button-text, #374151);
background: var(--boxcart-qty-button-hover-bg, #e5e7eb);
}
.boxcart-standard-selector__btn:focus {
outline: none;
border-color: var(--boxcart-frontend-primary);
box-shadow: none;
}
.boxcart-standard-selector__btn:focus:not(:focus-visible) {
outline: none;
border-color: var(--boxcart-frontend-border-light);
box-shadow: none;
}
.boxcart-standard-selector__btn:focus-visible {
outline: none;
border-color: var(--boxcart-frontend-primary);
box-shadow: none;
}
/* Standard selector focus - wrapper specificity */
.boxcart-products .boxcart-standard-selector button.boxcart-standard-selector__btn:focus,
.boxcart-sidecart .boxcart-standard-selector button.boxcart-standard-selector__btn:focus {
outline: none;
border-color: var(--boxcart-frontend-primary);
}
.boxcart-products .boxcart-standard-selector button.boxcart-standard-selector__btn:focus:not(:focus-visible),
.boxcart-sidecart .boxcart-standard-selector button.boxcart-standard-selector__btn:focus:not(:focus-visible) {
outline: none;
}
.boxcart-products .boxcart-standard-selector button.boxcart-standard-selector__btn:focus-visible,
.boxcart-sidecart .boxcart-standard-selector button.boxcart-standard-selector__btn:focus-visible {
outline: none;
border-color: var(--boxcart-frontend-primary);
}
.boxcart-standard-selector__btn:disabled {
opacity: 0.5;
cursor: not-allowed;
color: var(--boxcart-frontend-text-muted);
background: var(--boxcart-frontend-background);
border-color: var(--boxcart-qty-button-border, var(--boxcart-frontend-border-light));
}
.boxcart-standard-selector__center {
flex: 1;
min-width: 60px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 0 8px;
border: 1px solid var(--boxcart-qty-button-border, var(--boxcart-frontend-border-light));
border-radius: var(--boxcart-qty-button-radius, var(--boxcart-frontend-radius-sm));
background: var(--boxcart-frontend-background);
}
.boxcart-standard-selector__value {
font-size: 14px;
font-weight: 600;
color: var(--boxcart-qty-value-text, var(--boxcart-frontend-text));
text-align: center;
}
input.boxcart-standard-selector__value {
border: none;
background: transparent;
padding: 0;
width: auto;
min-width: 20px;
max-width: 60px;
flex: 0 1 auto;
outline: none;
box-shadow: none;
-moz-appearance: textfield;
-webkit-appearance: none;
appearance: none;
}
.boxcart-standard-selector__unit {
font-size: 12px;
font-weight: 500;
color: var(--boxcart-frontend-text-muted);
text-transform: capitalize;
}
/* Add to basket button within quantity selector */
.boxcart-qty-selector__add-btn {
width: 100%;
padding: 10px 16px;
background: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary));
border: var(--boxcart-btn-primary-border, none);
border-radius: var(--boxcart-btn-radius, var(--boxcart-frontend-radius-sm));
color: var(--boxcart-btn-primary-text, #fff);
font-size: 14px;
font-weight: var(--boxcart-btn-font-weight, 600);
cursor: pointer;
transition: background var(--boxcart-frontend-transition), border-color var(--boxcart-frontend-transition), color var(--boxcart-frontend-transition);
}
.boxcart-qty-selector__add-btn:hover {
background: var(--boxcart-btn-primary-bg-hover, var(--boxcart-frontend-primary-hover));
color: var(--boxcart-btn-primary-hover-text, var(--boxcart-btn-primary-text, #fff));
border: var(--boxcart-btn-primary-hover-border, var(--boxcart-btn-primary-border, none));
}
.boxcart-qty-selector__add-btn:disabled {
background: var(--boxcart-btn-disabled-bg, var(--boxcart-frontend-border));
color: var(--boxcart-btn-disabled-text, #999);
border: var(--boxcart-btn-disabled-border, none);
cursor: not-allowed;
}
/* Loading state for add button */
.boxcart-qty-selector__add-btn--loading {
position: relative;
color: transparent;
}
.boxcart-qty-selector__add-btn--loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: boxcart-spin 0.6s linear infinite;
}
@keyframes boxcart-spin {
to {
transform: rotate(360deg);
}
}
/* Generic add button (for quantity types) - always visible, uses button colour settings */
.boxcart-add-btn,
.boxcart-add-to-basket-qty {
width: 100%;
padding: 10px 16px;
background-color: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary));
background: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary));
border: var(--boxcart-btn-primary-border, none);
border-radius: var(--boxcart-btn-radius, var(--boxcart-frontend-radius-sm));
color: var(--boxcart-btn-primary-text, #fff);
font-size: 14px;
font-weight: var(--boxcart-btn-font-weight, 600);
cursor: pointer;
transition: background var(--boxcart-frontend-transition), border-color var(--boxcart-frontend-transition), color var(--boxcart-frontend-transition);
margin-top: 8px;
/* Ensure button is always visible */
opacity: 1;
visibility: visible;
}
.boxcart-add-btn:hover,
.boxcart-add-to-basket-qty:hover {
background-color: var(--boxcart-btn-primary-bg-hover, var(--boxcart-frontend-primary-hover));
background: var(--boxcart-btn-primary-bg-hover, var(--boxcart-frontend-primary-hover));
color: var(--boxcart-btn-primary-hover-text, var(--boxcart-btn-primary-text, #fff));
border: var(--boxcart-btn-primary-hover-border, var(--boxcart-btn-primary-border, none));
}
.boxcart-add-btn:disabled,
.boxcart-add-to-basket-qty:disabled {
background-color: var(--boxcart-btn-disabled-bg, var(--boxcart-frontend-border));
background: var(--boxcart-btn-disabled-bg, var(--boxcart-frontend-border));
color: var(--boxcart-btn-disabled-text, #999);
border: var(--boxcart-btn-disabled-border, none);
cursor: not-allowed;
opacity: 0.6;
}
/* Add button - wrapper specificity to ensure visibility and override theme styles */
.boxcart-products .boxcart-product-card button.boxcart-add-btn,
.boxcart-products .boxcart-product-card button.boxcart-add-to-basket-qty {
width: 100%;
padding: 10px 16px;
background-color: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary));
background: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary));
border: var(--boxcart-btn-primary-border, none);
border-radius: var(--boxcart-btn-radius, var(--boxcart-frontend-radius-sm));
color: var(--boxcart-btn-primary-text, #fff);
font-size: 14px;
font-weight: var(--boxcart-btn-font-weight, 600);
cursor: pointer;
opacity: 1;
visibility: visible;
display: block;
}
.boxcart-products .boxcart-product-card button.boxcart-add-btn:hover,
.boxcart-products .boxcart-product-card button.boxcart-add-to-basket-qty:hover {
background-color: var(--boxcart-btn-primary-bg-hover, var(--boxcart-frontend-primary-hover));
background: var(--boxcart-btn-primary-bg-hover, var(--boxcart-frontend-primary-hover));
color: var(--boxcart-btn-primary-hover-text, var(--boxcart-btn-primary-text, #fff));
border: var(--boxcart-btn-primary-hover-border, var(--boxcart-btn-primary-border, none));
}
.boxcart-products .boxcart-product-card button.boxcart-add-btn:disabled,
.boxcart-products .boxcart-product-card button.boxcart-add-to-basket-qty:disabled {
background-color: var(--boxcart-btn-disabled-bg, var(--boxcart-frontend-border));
background: var(--boxcart-btn-disabled-bg, var(--boxcart-frontend-border));
color: var(--boxcart-btn-disabled-text, #999);
border: var(--boxcart-btn-disabled-border, none);
cursor: not-allowed;
}
/* In-basket state - button shows "Update Basket" after item has been added */
.boxcart-add-btn--in-basket,
.boxcart-add-to-basket-qty.boxcart-add-btn--in-basket {
background-color: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary));
background: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary));
color: var(--boxcart-btn-primary-text, #fff);
border: var(--boxcart-btn-primary-border, none);
}
.boxcart-products .boxcart-product-card button.boxcart-add-btn--in-basket,
.boxcart-products .boxcart-product-card button.boxcart-add-to-basket-qty.boxcart-add-btn--in-basket {
background-color: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary));
background: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary));
color: var(--boxcart-btn-primary-text, #fff);
border: var(--boxcart-btn-primary-border, none);
}
/* Table in-basket state */
.boxcart-table-add-btn--in-basket,
.boxcart-product-table-wrapper .boxcart-table-add-btn--in-basket,
.boxcart-stacked-list .boxcart-table-add-btn--in-basket {
background-color: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary));
color: var(--boxcart-btn-primary-text, #fff);
border: var(--boxcart-btn-primary-border, none);
}
/* Slot required message - shown below slot bar when user tries to add without selecting */
.boxcart-slot-required-message {
display: flex;
align-items: center;
gap: 10px;
margin-top: 12px;
margin-bottom: 20px;
padding: 12px 16px;
background: color-mix(in srgb, var(--boxcart-frontend-primary) 10%, white);
border: 1px solid var(--boxcart-frontend-primary);
border-radius: var(--boxcart-frontend-radius-sm);
color: var(--boxcart-frontend-text);
font-size: 14px;
font-weight: 500;
animation: boxcart-message-appear 0.3s ease-out;
}
.boxcart-slot-required-message svg {
flex-shrink: 0;
color: var(--boxcart-frontend-primary);
}
@keyframes boxcart-message-appear {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.boxcart-slot-required-message--hiding {
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
/* Add another button */
.boxcart-add-another {
width: 100%;
padding: 8px 12px;
background: transparent;
border: 1px dashed var(--boxcart-frontend-border);
border-radius: var(--boxcart-frontend-radius-sm);
color: var(--boxcart-frontend-primary);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all var(--boxcart-frontend-transition);
margin-top: 8px;
}
.boxcart-add-another:hover {
border-color: var(--boxcart-frontend-primary);
background: var(--boxcart-frontend-primary-light);
}
/* Add more section divider */
.boxcart-divider {
height: 1px;
background: var(--boxcart-frontend-border);
margin: 12px 0;
}
/* Add more section */
.boxcart-add-more-section {
margin-top: 12px;
}
/* Product card expand/collapse for quantity options */
.boxcart-product-card__qty-toggle {
display: none;
}
.boxcart-product-card--has-qty-types .boxcart-product-card__qty-options {
display: none;
}
.boxcart-product-card--has-qty-types.boxcart-product-card--expanded .boxcart-product-card__qty-options {
display: block;
}
/* Sidecart item with quantity type */
.boxcart-sidecart__item-qty-label {
font-size: 12px;
color: var(--boxcart-frontend-text-muted);
margin-left: 4px;
}
/* Basket view item with quantity type */
.boxcart-basket-item__qty-display {
display: flex;
align-items: baseline;
gap: 4px;
}
.boxcart-basket-item__qty-value {
font-weight: 600;
}
.boxcart-basket-item__qty-unit {
font-size: 13px;
color: var(--boxcart-frontend-text-muted);
}
/* Basket page quantity type display */
.boxcart-basket__qty-display {
display: flex;
align-items: baseline;
gap: 4px;
padding: 8px 12px;
background: var(--boxcart-frontend-background-alt);
border-radius: var(--boxcart-frontend-radius-sm);
}
.boxcart-basket__qty-value {
font-size: 15px;
font-weight: 600;
color: var(--boxcart-frontend-text-dark);
}
.boxcart-basket__qty-unit {
font-size: 13px;
color: var(--boxcart-frontend-text-muted);
}
/* Sidecart quantity type display */
.boxcart-sidecart__quantity-display {
display: inline-flex;
align-items: baseline;
gap: 4px;
padding: 4px 8px;
background: var(--boxcart-frontend-background-alt);
border-radius: var(--boxcart-frontend-radius-sm);
font-size: 13px;
color: var(--boxcart-frontend-text);
}
/* ==========================================================================
Theme Override — Quantity button background, color, border
Some themes (e.g. Elementor / Hello) reset `background-color: transparent`
and `color` on elements. These wrapper-specificity rules ensure
BoxCart quantity controls always reflect the admin colour settings.
========================================================================== */
.boxcart-products button.boxcart-quantity__btn,
.boxcart-products button.boxcart-quantity-btn,
.boxcart-products button.boxcart-step-selector__btn,
.boxcart-products button.boxcart-standard-selector__btn,
.boxcart-basket button.boxcart-quantity__btn,
.boxcart-basket button.boxcart-quantity-btn {
background-color: var(--boxcart-qty-button-bg, #f3f4f6);
color: var(--boxcart-qty-button-text, #374151);
border-color: var(--boxcart-qty-button-border, var(--boxcart-frontend-border-light));
border-radius: var(--boxcart-qty-button-radius, var(--boxcart-frontend-radius-sm));
}
.boxcart-products button.boxcart-quantity__btn:hover:not(:disabled),
.boxcart-products button.boxcart-quantity-btn:hover:not(:disabled),
.boxcart-products button.boxcart-step-selector__btn:hover:not(:disabled),
.boxcart-products button.boxcart-standard-selector__btn:hover:not(:disabled),
.boxcart-basket button.boxcart-quantity__btn:hover:not(:disabled),
.boxcart-basket button.boxcart-quantity-btn:hover:not(:disabled) {
background-color: var(--boxcart-qty-button-hover-bg, #e5e7eb);
color: var(--boxcart-qty-button-text, #374151);
}
/* Disabled quantity buttons — wrapper specificity to beat theme resets */
.boxcart-products button.boxcart-quantity__btn:disabled,
.boxcart-products button.boxcart-quantity-btn:disabled,
.boxcart-products button.boxcart-step-selector__btn:disabled,
.boxcart-products button.boxcart-standard-selector__btn:disabled,
.boxcart-basket button.boxcart-quantity__btn:disabled,
.boxcart-basket button.boxcart-quantity-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
color: var(--boxcart-frontend-text-muted, #999);
background-color: var(--boxcart-frontend-background, #fff);
border-color: var(--boxcart-qty-button-border, var(--boxcart-frontend-border-light));
}
/* Table / stacked view quantity buttons */
.boxcart-product-table-wrapper button.boxcart-table-qty__btn,
.boxcart-stacked-list button.boxcart-table-qty__btn {
background-color: var(--boxcart-qty-button-bg, #f3f4f6);
color: var(--boxcart-qty-button-text, #374151);
border-color: var(--boxcart-qty-button-border, var(--boxcart-frontend-border-light));
border-radius: var(--boxcart-qty-button-radius, var(--boxcart-frontend-radius-sm));
}
.boxcart-product-table-wrapper button.boxcart-table-qty__btn:hover:not(:disabled),
.boxcart-stacked-list button.boxcart-table-qty__btn:hover:not(:disabled) {
background-color: var(--boxcart-qty-button-hover-bg, #e5e7eb);
color: var(--boxcart-qty-button-text, #374151);
}
.boxcart-product-table-wrapper button.boxcart-table-qty__btn:disabled,
.boxcart-stacked-list button.boxcart-table-qty__btn:disabled {
opacity: 0.5;
cursor: not-allowed;
color: var(--boxcart-frontend-text-muted, #999);
background-color: var(--boxcart-frontend-background, #fff);
border-color: var(--boxcart-qty-button-border, var(--boxcart-frontend-border-light));
}
/* Mobile adjustments */
@media (max-width: 480px) {
.boxcart-qty-tabs {
padding: 3px;
}
.boxcart-qty-tab {
padding: 6px 8px;
font-size: 11px;
}
.boxcart-step-selector__btn,
.boxcart-standard-selector__btn {
width: 32px;
height: 32px;
font-size: 16px;
}
.boxcart-step-selector__value,
.boxcart-standard-selector__value {
font-size: 14px;
}
.boxcart-step-selector__center,
.boxcart-standard-selector__center {
height: 32px;
}
.boxcart-product-card__basket-items {
padding: 8px 10px;
}
}
/* ============================================
Table View Styles
============================================ */
/* View Toggle - using wrapper for specificity */
.boxcart-products .boxcart-view-toggle {
display: flex;
gap: 4px;
background: var(--boxcart-frontend-background-alt);
border-radius: var(--boxcart-frontend-radius-md);
padding: 4px;
margin-left: auto;
}
.boxcart-products .boxcart-view-toggle button.boxcart-view-toggle__btn {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 45px;
border: none;
background: transparent;
background-color: transparent;
border-radius: var(--boxcart-frontend-radius-sm);
cursor: pointer;
color: var(--boxcart-frontend-text-muted);
transition: all var(--boxcart-frontend-transition);
outline: none;
box-shadow: none;
}
.boxcart-products .boxcart-view-toggle button.boxcart-view-toggle__btn:hover,
.boxcart-products .boxcart-view-toggle button.boxcart-view-toggle__btn:focus,
.boxcart-products .boxcart-view-toggle button.boxcart-view-toggle__btn:focus-visible,
.boxcart-products .boxcart-view-toggle button.boxcart-view-toggle__btn:active {
background: var(--boxcart-frontend-background);
background-color: var(--boxcart-frontend-background);
color: var(--boxcart-frontend-text);
box-shadow: var(--boxcart-frontend-shadow-sm);
border: none;
outline: none;
outline-width: 0;
outline-offset: 0;
}
.boxcart-products .boxcart-view-toggle button.boxcart-view-toggle__btn.boxcart-view-toggle__btn--active,
.boxcart-products .boxcart-view-toggle button.boxcart-view-toggle__btn.boxcart-view-toggle__btn--active:focus,
.boxcart-products .boxcart-view-toggle button.boxcart-view-toggle__btn.boxcart-view-toggle__btn--active:focus-visible {
background: var(--boxcart-frontend-background);
background-color: var(--boxcart-frontend-background);
color: var(--boxcart-frontend-text);
box-shadow: var(--boxcart-frontend-shadow-sm);
outline: none;
outline-width: 0;
outline-offset: 0;
}
.boxcart-view-toggle__btn svg {
width: 24px;
height: 24px;
}
/* Product Table Wrapper */
.boxcart-product-table-wrapper {
margin-top: var(--boxcart-frontend-spacing-lg);
border-radius: var(--boxcart-frontend-radius-xl);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
padding-bottom: 0;
margin-bottom: 0;
}
/* Product Table - using wrapper for high specificity */
.boxcart-product-table-wrapper table.boxcart-product-table {
width: 100%;
min-width: 600px; /* Prevent squishing on small screens - allows horizontal scroll */
table-layout: fixed; /* Prevent column width shifts based on content */
border-collapse: collapse;
background: var(--boxcart-frontend-background);
background-color: var(--boxcart-frontend-background);
border-radius: var(--boxcart-frontend-radius-xl);
/* Note: overflow removed to allow wrapper's overflow-x:auto to enable horizontal scrolling */
box-shadow: var(--boxcart-frontend-shadow-sm);
margin-bottom: 0;
padding-bottom: 0;
}
/* Ensure no extra bottom padding on table body */
.boxcart-product-table-wrapper table.boxcart-product-table tbody {
padding-bottom: 0;
margin-bottom: 0;
}
/* Table header - high specificity to override theme */
.boxcart-product-table-wrapper table.boxcart-product-table thead,
.boxcart-product-table-wrapper table.boxcart-product-table thead tr {
background: transparent;
background-color: transparent;
border: none;
box-shadow: none;
}
.boxcart-product-table-wrapper table.boxcart-product-table thead tr th {
text-align: left;
padding: var(--boxcart-frontend-spacing-md);
background: transparent;
background-color: transparent;
font-size: 13px;
font-weight: 600;
color: var(--boxcart-frontend-text-muted);
border: none;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid var(--boxcart-frontend-background-alt);
box-shadow: none;
}
.boxcart-product-table-wrapper table.boxcart-product-table thead tr th:first-child {
padding-left: var(--boxcart-frontend-spacing-lg);
}
.boxcart-product-table-wrapper table.boxcart-product-table thead tr th:last-child {
padding-right: var(--boxcart-frontend-spacing-lg);
text-align: right;
}
/* Table body cells - high specificity */
.boxcart-product-table-wrapper table.boxcart-product-table tbody tr td {
padding: var(--boxcart-frontend-spacing-md);
border: none;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid var(--boxcart-frontend-background-alt);
vertical-align: middle;
}
/* First column (favourite) padding handled by its own cell rule */
.boxcart-product-table-wrapper table.boxcart-product-table tbody tr td:last-child {
padding-right: var(--boxcart-frontend-spacing-lg);
}
.boxcart-product-table-wrapper table.boxcart-product-table tbody tr:last-child td {
border-bottom: none;
}
/* Default row colors - all rows same color when NOT striped */
.boxcart-product-table-wrapper table.boxcart-product-table tbody tr,
.boxcart-product-table-wrapper table.boxcart-product-table tbody tr > td,
.boxcart-product-table-wrapper table.boxcart-product-table tbody tr > th {
background: var(--boxcart-table-row-primary, var(--boxcart-frontend-background));
background-color: var(--boxcart-table-row-primary, var(--boxcart-frontend-background));
}
/* Hover state for rows */
.boxcart-product-table-wrapper table.boxcart-product-table tbody tr:hover,
.boxcart-product-table-wrapper table.boxcart-product-table tbody tr:hover > td,
.boxcart-product-table-wrapper table.boxcart-product-table tbody tr:hover > th {
background: var(--boxcart-table-row-hover, var(--boxcart-frontend-primary-light));
background-color: var(--boxcart-table-row-hover, var(--boxcart-frontend-primary-light));
}
/* Striped rows variant - alternating colors: odd rows (1st, 3rd, etc.) are primary, even rows (2nd, 4th, etc.) are secondary */
.boxcart-product-table-wrapper table.boxcart-product-table.boxcart-product-table--striped tbody tr:nth-child(odd),
.boxcart-product-table-wrapper table.boxcart-product-table.boxcart-product-table--striped tbody tr:nth-child(odd) > td,
.boxcart-product-table-wrapper table.boxcart-product-table.boxcart-product-table--striped tbody tr:nth-child(odd) > th {
background: var(--boxcart-table-row-primary, var(--boxcart-frontend-background));
background-color: var(--boxcart-table-row-primary, var(--boxcart-frontend-background));
}
.boxcart-product-table-wrapper table.boxcart-product-table.boxcart-product-table--striped tbody tr:nth-child(even),
.boxcart-product-table-wrapper table.boxcart-product-table.boxcart-product-table--striped tbody tr:nth-child(even) > td,
.boxcart-product-table-wrapper table.boxcart-product-table.boxcart-product-table--striped tbody tr:nth-child(even) > th {
background: var(--boxcart-table-row-secondary, var(--boxcart-frontend-background-alt));
background-color: var(--boxcart-table-row-secondary, var(--boxcart-frontend-background-alt));
}
.boxcart-product-table-wrapper table.boxcart-product-table.boxcart-product-table--striped tbody tr:hover,
.boxcart-product-table-wrapper table.boxcart-product-table.boxcart-product-table--striped tbody tr:hover > td,
.boxcart-product-table-wrapper table.boxcart-product-table.boxcart-product-table--striped tbody tr:hover > th {
background: var(--boxcart-table-row-hover, var(--boxcart-frontend-primary-light));
background-color: var(--boxcart-table-row-hover, var(--boxcart-frontend-primary-light));
}
/* Explicit odd/even classes for filtered views - override nth-child when category filtering is active */
.boxcart-product-table-wrapper table.boxcart-product-table.boxcart-product-table--striped tbody tr.boxcart-table-row--odd,
.boxcart-product-table-wrapper table.boxcart-product-table.boxcart-product-table--striped tbody tr.boxcart-table-row--odd > td,
.boxcart-product-table-wrapper table.boxcart-product-table.boxcart-product-table--striped tbody tr.boxcart-table-row--odd > th {
background: var(--boxcart-table-row-primary, var(--boxcart-frontend-background));
background-color: var(--boxcart-table-row-primary, var(--boxcart-frontend-background));
}
.boxcart-product-table-wrapper table.boxcart-product-table.boxcart-product-table--striped tbody tr.boxcart-table-row--even,
.boxcart-product-table-wrapper table.boxcart-product-table.boxcart-product-table--striped tbody tr.boxcart-table-row--even > td,
.boxcart-product-table-wrapper table.boxcart-product-table.boxcart-product-table--striped tbody tr.boxcart-table-row--even > th {
background: var(--boxcart-table-row-secondary, var(--boxcart-frontend-background-alt));
background-color: var(--boxcart-table-row-secondary, var(--boxcart-frontend-background-alt));
}
/* Hover state for explicit odd/even classes - must appear after and match specificity of explicit class rules above */
.boxcart-product-table-wrapper table.boxcart-product-table.boxcart-product-table--striped tbody tr.boxcart-table-row--odd:hover,
.boxcart-product-table-wrapper table.boxcart-product-table.boxcart-product-table--striped tbody tr.boxcart-table-row--odd:hover > td,
.boxcart-product-table-wrapper table.boxcart-product-table.boxcart-product-table--striped tbody tr.boxcart-table-row--odd:hover > th,
.boxcart-product-table-wrapper table.boxcart-product-table.boxcart-product-table--striped tbody tr.boxcart-table-row--even:hover,
.boxcart-product-table-wrapper table.boxcart-product-table.boxcart-product-table--striped tbody tr.boxcart-table-row--even:hover > td,
.boxcart-product-table-wrapper table.boxcart-product-table.boxcart-product-table--striped tbody tr.boxcart-table-row--even:hover > th {
background: var(--boxcart-table-row-hover, var(--boxcart-frontend-primary-light));
background-color: var(--boxcart-table-row-hover, var(--boxcart-frontend-primary-light));
}
/* Out of stock row */
.boxcart-product-table__row--out-of-stock {
opacity: 0.6;
}
/* Table Product Cell */
.boxcart-table-product {
display: flex;
align-items: center;
gap: var(--boxcart-frontend-spacing-md);
}
.boxcart-table-product__image {
width: 48px;
height: 48px;
border-radius: var(--boxcart-frontend-radius-md);
object-fit: cover;
background: var(--boxcart-frontend-background-alt);
flex-shrink: 0;
border: 1px solid var(--boxcart-frontend-border);
}
.boxcart-table-product__image--placeholder {
display: flex;
align-items: center;
justify-content: center;
color: var(--boxcart-frontend-text-muted);
}
.boxcart-table-product__name {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-weight: 600;
color: var(--boxcart-frontend-text);
}
.boxcart-table-product__category {
font-size: 11px;
color: var(--boxcart-frontend-text-muted);
margin-top: 2px;
}
.boxcart-table-product__badge--out-of-stock {
display: inline-block;
padding: 2px 6px;
background: var(--boxcart-frontend-error);
color: var(--boxcart-frontend-background);
font-size: 10px;
font-weight: 600;
border-radius: var(--boxcart-frontend-radius-sm);
white-space: nowrap;
flex-shrink: 0;
}
/* Table Price Cell */
.boxcart-table-price {
font-weight: 700;
color: var(--boxcart-frontend-primary);
white-space: nowrap;
}
.boxcart-table-price__unit {
font-weight: 400;
color: var(--boxcart-frontend-text-muted);
font-size: 13px;
}
/* Unit Buttons Scroll Container - wrapper for fade indicators */
.boxcart-unit-scroll-container {
position: relative;
display: flex;
flex: 1;
min-width: 0;
max-width: 100%;
}
/* Fade indicators for scrollable unit buttons */
.boxcart-unit-scroll-container::before,
.boxcart-unit-scroll-container::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 24px;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 2;
}
.boxcart-unit-scroll-container::before {
left: 0;
background: linear-gradient(to right, var(--boxcart-frontend-background) 0%, transparent 100%);
}
.boxcart-unit-scroll-container::after {
right: 0;
background: linear-gradient(to left, var(--boxcart-frontend-background) 0%, transparent 100%);
}
/* Show fades based on scroll position - controlled via JS data attributes */
.boxcart-unit-scroll-container[data-scroll-left="true"]::before {
opacity: 1;
}
.boxcart-unit-scroll-container[data-scroll-right="true"]::after {
opacity: 1;
}
/* Unit Buttons - high specificity for theme overrides */
/* Scrollable on all screen sizes to handle many unit options */
.boxcart-unit-buttons {
display: flex;
gap: 4px;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
flex: 1;
min-width: 0;
scroll-behavior: smooth;
/* Drag-to-scroll cursor for desktop */
cursor: grab;
user-select: none;
}
.boxcart-unit-buttons.is-dragging {
cursor: grabbing;
scroll-behavior: auto;
}
.boxcart-unit-buttons::-webkit-scrollbar {
display: none;
}
.boxcart-unit-buttons .boxcart-unit-btn,
.boxcart-unit-buttons .boxcart-table-unit-btn {
flex-shrink: 0;
}
/* In table context - scroll container must constrain buttons within cell */
.boxcart-product-table__cell--unit .boxcart-unit-scroll-container {
display: block;
/* Force container to respect cell width: 200px cell - 16px padding (8px each side) */
width: 184px;
max-width: 184px;
overflow: hidden;
position: relative;
box-sizing: border-box;
}
.boxcart-product-table__cell--unit .boxcart-unit-buttons {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 4px;
/* Drag-to-scroll cursor for desktop */
cursor: grab;
user-select: none;
}
.boxcart-product-table__cell--unit .boxcart-unit-buttons.is-dragging {
cursor: grabbing;
scroll-behavior: auto; /* Disable smooth scroll while dragging */
}
.boxcart-product-table__cell--unit .boxcart-unit-buttons::-webkit-scrollbar {
display: none;
}
.boxcart-product-table__cell--unit .boxcart-unit-buttons .boxcart-table-unit-btn {
flex-shrink: 0;
/* Inherit grab cursor from parent for consistent UX */
cursor: inherit;
}
.boxcart-product-table-wrapper button.boxcart-unit-btn,
.boxcart-product-table-wrapper button.boxcart-table-unit-btn,
[class*="boxcart-"] button.boxcart-unit-btn,
[class*="boxcart-"] button.boxcart-table-unit-btn {
padding: 4px 12px;
border: 1px solid var(--boxcart-qty-tab-border, var(--boxcart-frontend-border));
background: var(--boxcart-qty-tab-bar-bg, var(--boxcart-frontend-background));
background-color: var(--boxcart-qty-tab-bar-bg, var(--boxcart-frontend-background));
border-radius: var(--boxcart-qty-tab-radius, var(--boxcart-frontend-radius-sm));
font-size: 11px;
font-weight: 600;
color: var(--boxcart-qty-tab-inactive-text, var(--boxcart-frontend-text-muted));
cursor: grab; /* Show grab cursor on buttons too */
transition: all var(--boxcart-frontend-transition);
text-transform: uppercase;
letter-spacing: 0.5px;
outline: none;
box-shadow: none;
}
/* Show grabbing cursor when dragging */
.boxcart-unit-buttons.is-dragging .boxcart-table-unit-btn,
.boxcart-unit-buttons.is-dragging .boxcart-unit-btn {
cursor: grabbing;
}
.boxcart-product-table-wrapper button.boxcart-unit-btn:hover:not(:disabled),
.boxcart-product-table-wrapper button.boxcart-table-unit-btn:hover:not(:disabled),
[class*="boxcart-"] button.boxcart-unit-btn:hover:not(:disabled),
[class*="boxcart-"] button.boxcart-table-unit-btn:hover:not(:disabled) {
border-color: var(--boxcart-frontend-primary);
color: var(--boxcart-qty-tab-hover-text, var(--boxcart-frontend-primary));
background: var(--boxcart-qty-tab-hover-bg, var(--boxcart-frontend-background));
background-color: var(--boxcart-qty-tab-hover-bg, var(--boxcart-frontend-background));
outline: none;
box-shadow: none;
}
.boxcart-product-table-wrapper button.boxcart-unit-btn:focus,
.boxcart-product-table-wrapper button.boxcart-table-unit-btn:focus,
.boxcart-product-table-wrapper button.boxcart-unit-btn:focus-visible,
.boxcart-product-table-wrapper button.boxcart-table-unit-btn:focus-visible,
.boxcart-product-table-wrapper button.boxcart-unit-btn:active,
.boxcart-product-table-wrapper button.boxcart-table-unit-btn:active,
[class*="boxcart-"] button.boxcart-unit-btn:focus,
[class*="boxcart-"] button.boxcart-table-unit-btn:focus,
[class*="boxcart-"] button.boxcart-unit-btn:focus-visible,
[class*="boxcart-"] button.boxcart-table-unit-btn:focus-visible,
[class*="boxcart-"] button.boxcart-unit-btn:active,
[class*="boxcart-"] button.boxcart-table-unit-btn:active {
border-color: var(--boxcart-frontend-primary);
color: var(--boxcart-frontend-primary);
background: var(--boxcart-frontend-background);
background-color: var(--boxcart-frontend-background);
outline: none;
box-shadow: none;
}
.boxcart-product-table-wrapper button.boxcart-unit-btn.boxcart-unit-btn--active,
.boxcart-product-table-wrapper button.boxcart-table-unit-btn.boxcart-table-unit-btn--active,
.boxcart-product-table-wrapper button.boxcart-unit-btn.boxcart-unit-btn--active:hover,
.boxcart-product-table-wrapper button.boxcart-table-unit-btn.boxcart-table-unit-btn--active:hover,
.boxcart-product-table-wrapper button.boxcart-unit-btn.boxcart-unit-btn--active:focus,
.boxcart-product-table-wrapper button.boxcart-table-unit-btn.boxcart-table-unit-btn--active:focus,
.boxcart-product-table-wrapper button.boxcart-unit-btn.boxcart-unit-btn--active:active,
.boxcart-product-table-wrapper button.boxcart-table-unit-btn.boxcart-table-unit-btn--active:active,
[class*="boxcart-"] button.boxcart-unit-btn.boxcart-unit-btn--active,
[class*="boxcart-"] button.boxcart-table-unit-btn.boxcart-table-unit-btn--active,
[class*="boxcart-"] button.boxcart-unit-btn.boxcart-unit-btn--active:hover,
[class*="boxcart-"] button.boxcart-table-unit-btn.boxcart-table-unit-btn--active:hover,
[class*="boxcart-"] button.boxcart-unit-btn.boxcart-unit-btn--active:focus,
[class*="boxcart-"] button.boxcart-table-unit-btn.boxcart-table-unit-btn--active:focus,
[class*="boxcart-"] button.boxcart-unit-btn.boxcart-unit-btn--active:active,
[class*="boxcart-"] button.boxcart-table-unit-btn.boxcart-table-unit-btn--active:active {
background: var(--boxcart-qty-tab-active-bg, var(--boxcart-frontend-primary));
background-color: var(--boxcart-qty-tab-active-bg, var(--boxcart-frontend-primary));
border-color: var(--boxcart-qty-tab-active-border, var(--boxcart-qty-tab-active-bg, var(--boxcart-frontend-primary)));
color: var(--boxcart-qty-tab-active-text, #ffffff);
}
.boxcart-unit-btn:disabled,
.boxcart-table-unit-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Unit Dropdown */
.boxcart-unit-select,
.boxcart-table-unit-dropdown {
padding: 8px 12px;
border: 1px solid var(--boxcart-frontend-border);
border-radius: var(--boxcart-frontend-radius-md);
font-size: 13px;
color: var(--boxcart-frontend-text);
background: var(--boxcart-frontend-background);
cursor: pointer;
min-width: 100px;
}
.boxcart-unit-select:focus,
.boxcart-table-unit-dropdown:focus {
outline: none;
border-color: var(--boxcart-frontend-primary);
box-shadow: 0 0 0 3px var(--boxcart-frontend-primary-light);
}
/* Single unit display - styled like active unit button */
.boxcart-unit-single {
display: inline-block;
padding: 4px 12px;
background: var(--boxcart-qty-tab-active-bg, var(--boxcart-frontend-primary));
border: 1px solid var(--boxcart-qty-tab-active-border, var(--boxcart-qty-tab-active-bg, var(--boxcart-frontend-primary)));
border-radius: var(--boxcart-frontend-radius-sm);
font-size: 11px;
font-weight: 600;
color: var(--boxcart-qty-tab-active-text, #ffffff);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Table column widths - high specificity to override themes */
.boxcart-product-table-wrapper table.boxcart-product-table th.boxcart-product-table__cell--favourite,
.boxcart-product-table-wrapper table.boxcart-product-table td.boxcart-product-table__cell--favourite {
width: 40px;
min-width: 40px;
max-width: 40px;
padding: 12px;
text-align: center;
}
.boxcart-product-table-wrapper table.boxcart-product-table th.boxcart-product-table__cell--price,
.boxcart-product-table-wrapper table.boxcart-product-table td.boxcart-product-table__cell--price {
width: 240px;
min-width: 240px;
max-width: 240px;
white-space: nowrap;
overflow: hidden; /* Prevent content from pushing column wider */
}
.boxcart-product-table-wrapper table.boxcart-product-table th.boxcart-product-table__cell--unit,
.boxcart-product-table-wrapper table.boxcart-product-table td.boxcart-product-table__cell--unit {
width: 200px;
min-width: 200px;
max-width: 200px;
padding: 8px;
}
.boxcart-product-table-wrapper table.boxcart-product-table th.boxcart-product-table__cell--qty,
.boxcart-product-table-wrapper table.boxcart-product-table td.boxcart-product-table__cell--qty {
width: 110px;
min-width: 110px;
white-space: nowrap;
}
.boxcart-product-table-wrapper table.boxcart-product-table th.boxcart-product-table__cell--action,
.boxcart-product-table-wrapper table.boxcart-product-table td.boxcart-product-table__cell--action {
width: 180px;
min-width: 180px;
white-space: nowrap;
text-align: right;
padding-left: 8px;
}
/* Table Quantity Selector */
.boxcart-table-qty {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.boxcart-table-qty__btn {
width: 36px;
height: 36px;
border: 1px solid var(--boxcart-qty-button-border, var(--boxcart-frontend-border-light));
background: var(--boxcart-qty-button-bg, #f3f4f6);
border-radius: var(--boxcart-qty-button-radius, var(--boxcart-frontend-radius-sm));
font-size: 18px;
font-weight: 500;
color: var(--boxcart-qty-button-text, #374151);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
transition: all var(--boxcart-frontend-transition);
/* Prevent browser default styling */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.boxcart-table-qty__btn:hover:not(:disabled),
.boxcart-table-qty__btn:focus:not(:disabled),
.boxcart-table-qty__btn:active:not(:disabled) {
border-color: var(--boxcart-frontend-primary);
color: var(--boxcart-qty-button-text, #374151);
background: var(--boxcart-qty-button-hover-bg, #e5e7eb);
outline: none;
box-shadow: none;
}
/* Table qty button focus - wrapper specificity */
.boxcart-product-table-wrapper .boxcart-table-qty button.boxcart-table-qty__btn:hover:not(:disabled),
.boxcart-product-table-wrapper .boxcart-table-qty button.boxcart-table-qty__btn:focus:not(:disabled),
.boxcart-product-table-wrapper .boxcart-table-qty button.boxcart-table-qty__btn:active:not(:disabled) {
outline: none;
box-shadow: none;
}
.boxcart-table-qty__btn:disabled {
opacity: 0.5;
cursor: not-allowed;
background: var(--boxcart-frontend-background);
border-color: var(--boxcart-qty-button-border, var(--boxcart-frontend-border-light));
color: var(--boxcart-frontend-text-muted);
}
/* Disabled button - wrapper specificity to override theme defaults */
.boxcart-product-table-wrapper .boxcart-table-qty button.boxcart-table-qty__btn:disabled,
.boxcart-stacked-list .boxcart-table-qty button.boxcart-table-qty__btn:disabled {
opacity: 0.5;
cursor: not-allowed;
background: var(--boxcart-frontend-background);
border-color: var(--boxcart-qty-button-border, var(--boxcart-frontend-border-light));
color: var(--boxcart-frontend-text-muted);
outline: none;
box-shadow: none;
}
/* Ensure tooltip ancestors don't clip — Elementor widgets often set overflow:hidden */
.elementor-widget-container .boxcart-products,
.elementor-widget-container .boxcart-products .boxcart-products__grid,
.elementor-widget-container .boxcart-products .boxcart-product-card,
.elementor-widget-container .boxcart-products .boxcart-product-card__content,
.elementor-widget-container .boxcart-products .boxcart-qty-selector {
overflow: visible;
}
/* Quantity button tooltip (max quantity reached) */
.boxcart-table-qty__btn[data-tooltip],
.boxcart-step-selector__btn[data-tooltip],
.boxcart-standard-selector__btn[data-tooltip],
.boxcart-sidecart__quantity-btn[data-tooltip],
.boxcart-quantity-btn[data-tooltip] {
position: relative;
}
.boxcart-table-qty__btn[data-tooltip]::after,
.boxcart-step-selector__btn[data-tooltip]::after,
.boxcart-standard-selector__btn[data-tooltip]::after,
.boxcart-sidecart__quantity-btn[data-tooltip]::after,
.boxcart-quantity-btn[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
right: 0;
padding: 6px 10px;
background: #1E1E1E;
color: #fff;
font-size: 12px;
font-weight: 500;
line-height: 1.3;
white-space: nowrap;
border-radius: var(--boxcart-frontend-radius-sm, 4px);
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease, visibility 0.15s ease;
pointer-events: none;
z-index: 100;
}
.boxcart-table-qty__btn[data-tooltip]:hover::after,
.boxcart-step-selector__btn[data-tooltip]:hover::after,
.boxcart-standard-selector__btn[data-tooltip]:hover::after,
.boxcart-sidecart__quantity-btn[data-tooltip]:hover::after,
.boxcart-quantity-btn[data-tooltip]:hover::after {
opacity: 1;
visibility: visible;
}
.boxcart-table-qty__input {
width: auto;
min-width: 50px; /* Fits double digits comfortably */
max-width: 70px; /* Allows triple digits */
height: 36px;
padding: 0 8px;
border: 1px solid var(--boxcart-qty-button-border, var(--boxcart-frontend-border-light));
border-radius: var(--boxcart-qty-button-radius, var(--boxcart-frontend-radius-sm));
background: var(--boxcart-frontend-background);
text-align: center;
font-size: 14px;
font-weight: 600;
color: var(--boxcart-qty-value-text, var(--boxcart-frontend-text));
flex-shrink: 0;
/* Match button styling */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* Table qty input - wrapper specificity to override theme defaults */
.boxcart-product-table-wrapper .boxcart-table-qty input.boxcart-table-qty__input,
.boxcart-stacked-list .boxcart-table-qty input.boxcart-table-qty__input {
width: auto;
min-width: 50px; /* Fits double digits comfortably */
max-width: 70px; /* Allows triple digits */
height: 36px;
padding: 0 8px;
border: 1px solid var(--boxcart-qty-button-border, var(--boxcart-frontend-border-light));
border-radius: var(--boxcart-qty-button-radius, var(--boxcart-frontend-radius-sm));
background: var(--boxcart-frontend-background);
text-align: center;
font-size: 14px;
font-weight: 600;
color: var(--boxcart-qty-value-text, var(--boxcart-frontend-text));
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
box-shadow: none;
}
.boxcart-table-qty__input:focus {
outline: none;
border-color: var(--boxcart-frontend-primary);
box-shadow: none;
}
/* Table qty input focus - wrapper specificity */
.boxcart-product-table-wrapper .boxcart-table-qty input.boxcart-table-qty__input:focus {
outline: none;
box-shadow: none;
}
.boxcart-table-qty__input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Table qty center wrapper — matches card selector design */
.boxcart-table-qty__center {
flex: 1;
min-width: 60px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 0 8px;
border: 1px solid var(--boxcart-qty-button-border, var(--boxcart-frontend-border-light));
border-radius: var(--boxcart-qty-button-radius, var(--boxcart-frontend-radius-sm));
background: var(--boxcart-frontend-background);
}
.boxcart-table-qty__center .boxcart-table-qty__input {
border: none;
background: transparent;
padding: 0;
width: 100%;
min-width: 0;
max-width: none;
height: auto;
outline: none;
box-shadow: none;
flex-shrink: 1;
}
.boxcart-product-table-wrapper .boxcart-table-qty .boxcart-table-qty__center input.boxcart-table-qty__input,
.boxcart-stacked-list .boxcart-table-qty .boxcart-table-qty__center input.boxcart-table-qty__input {
border: none;
background: transparent;
padding: 0;
width: 100%;
min-width: 0;
max-width: none;
height: auto;
outline: none;
box-shadow: none;
}
.boxcart-table-qty__unit {
font-size: 12px;
font-weight: 500;
color: var(--boxcart-frontend-text-muted);
text-transform: capitalize;
flex-shrink: 0;
}
/* Table Favourite Column - styles for the button inside */
.boxcart-table-favourite {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: none;
border-radius: var(--boxcart-frontend-radius-sm);
cursor: pointer;
color: var(--boxcart-frontend-text-muted);
transition: all var(--boxcart-frontend-transition);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.boxcart-table-favourite:hover {
color: var(--boxcart-favourite-colour, #E25555);
}
.boxcart-table-favourite--active {
color: var(--boxcart-favourite-colour, #E25555);
}
.boxcart-table-favourite--active:hover {
color: var(--boxcart-favourite-colour, #E25555);
}
.boxcart-table-favourite__icon {
display: block;
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* Table favourite - wrapper specificity */
.boxcart-product-table-wrapper table.boxcart-product-table button.boxcart-table-favourite {
background: transparent;
border: none;
outline: none;
box-shadow: none;
}
.boxcart-product-table-wrapper table.boxcart-product-table button.boxcart-table-favourite:hover,
.boxcart-product-table-wrapper table.boxcart-product-table button.boxcart-table-favourite:focus {
background: transparent;
outline: none;
box-shadow: none;
}
/* Table Actions */
.boxcart-table-actions {
display: flex;
align-items: center;
gap: var(--boxcart-frontend-spacing-sm);
justify-content: flex-end;
}
.boxcart-table-actions__info {
text-align: right;
}
.boxcart-table-total {
font-size: 13px;
color: var(--boxcart-frontend-text-muted);
white-space: nowrap;
}
.boxcart-table-total strong {
color: var(--boxcart-frontend-primary);
font-weight: 700;
}
.boxcart-table-in-basket {
display: flex;
align-items: flex-start;
gap: 4px;
font-size: 12px;
color: var(--boxcart-qty-price-accent, var(--boxcart-frontend-success));
}
.boxcart-table-in-basket svg {
width: 14px;
height: 14px;
flex-shrink: 0;
margin-top: 2px;
}
.boxcart-table-in-basket__details {
display: flex;
flex-direction: column;
gap: 1px;
line-height: 1.3;
}
.boxcart-table-in-basket__qty {
font-weight: 500;
color: var(--boxcart-qty-in-basket-text, var(--boxcart-frontend-text));
font-size: 11px;
}
.boxcart-table-in-basket__price {
font-weight: 600;
color: var(--boxcart-qty-price-accent, var(--boxcart-frontend-success));
}
/* Inline Basket Indicator (below price in table) */
.boxcart-table-basket-indicator {
display: flex;
align-items: center;
gap: 4px;
margin-top: 4px;
padding: 4px 8px;
background: var(--boxcart-qty-in-basket-bg, var(--boxcart-frontend-primary-light, rgba(45, 125, 95, 0.08)));
border: 1px solid var(--boxcart-qty-in-basket-border, var(--boxcart-frontend-primary-light, rgba(45, 125, 95, 0.15)));
border-radius: var(--boxcart-qty-in-basket-radius, var(--boxcart-frontend-radius-sm, 4px));
font-size: 11px;
line-height: 1.3;
overflow: hidden;
min-width: 0;
}
.boxcart-table-basket-indicator__label {
color: var(--boxcart-qty-price-accent, var(--boxcart-frontend-success, #2D7D5F));
font-weight: 500;
}
.boxcart-table-basket-indicator__summary {
color: var(--boxcart-qty-in-basket-text, var(--boxcart-frontend-text));
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.boxcart-table-basket-indicator__value {
color: var(--boxcart-qty-price-accent, var(--boxcart-frontend-success, #2D7D5F));
font-weight: 700;
margin-left: auto;
}
/* Empty state (no items in basket for this unit) - white bg with border to stand out on grey rows */
.boxcart-table-basket-indicator:not(.boxcart-table-basket-indicator--has-items) {
background: var(--boxcart-frontend-background, #ffffff);
border: 1px solid var(--boxcart-frontend-border, #e0e0e0);
}
.boxcart-table-basket-indicator:not(.boxcart-table-basket-indicator--has-items) .boxcart-table-basket-indicator__label {
color: var(--boxcart-frontend-text-muted);
}
.boxcart-table-basket-indicator:not(.boxcart-table-basket-indicator--has-items) .boxcart-table-basket-indicator__summary {
color: var(--boxcart-frontend-text-muted);
}
.boxcart-table-basket-indicator:not(.boxcart-table-basket-indicator--has-items) .boxcart-table-basket-indicator__value {
color: var(--boxcart-frontend-text-muted);
font-weight: 500;
}
/* Mobile variant */
.boxcart-table-basket-indicator--mobile {
margin-top: 0;
margin-bottom: 10px;
padding: 8px 12px;
font-size: 13px;
width: 100%;
box-sizing: border-box;
}
/* Add Button */
.boxcart-table-add-btn {
padding: 8px 16px;
border: var(--boxcart-btn-primary-border, none);
border-radius: var(--boxcart-btn-radius, var(--boxcart-frontend-radius-md));
background: var(--boxcart-btn-primary-bg, var(--boxcart-frontend-primary));
color: var(--boxcart-btn-primary-text, var(--boxcart-frontend-background));
font-size: 13px;
font-weight: var(--boxcart-btn-font-weight, 600);
cursor: pointer;
transition: background var(--boxcart-frontend-transition), border-color var(--boxcart-frontend-transition), color var(--boxcart-frontend-transition);
white-space: nowrap;
min-width: 90px;
text-align: center;
box-sizing: border-box;
}
.boxcart-table-add-btn:hover:not(:disabled) {
background: var(--boxcart-btn-primary-bg-hover, var(--boxcart-frontend-primary-hover, #256b50));
color: var(--boxcart-btn-primary-hover-text, var(--boxcart-btn-primary-text, var(--boxcart-frontend-background)));
border: var(--boxcart-btn-primary-hover-border, var(--boxcart-btn-primary-border, none));
}
.boxcart-table-add-btn:disabled {
background: var(--boxcart-btn-disabled-bg, #e5e5e5);
color: var(--boxcart-btn-disabled-text, #999);
border: var(--boxcart-btn-disabled-border, none);
opacity: 0.5;
cursor: not-allowed;
}
.boxcart-table-add-btn--update,
.boxcart-product-table-wrapper .boxcart-table-add-btn--update,
.boxcart-stacked-list .boxcart-table-add-btn--update {
background-color: var(--boxcart-frontend-success) !important;
}
.boxcart-table-add-btn--update:hover:not(:disabled),
.boxcart-product-table-wrapper .boxcart-table-add-btn--update:hover:not(:disabled),
.boxcart-stacked-list .boxcart-table-add-btn--update:hover:not(:disabled) {
background-color: var(--boxcart-frontend-success-dark, #2a6b4f) !important;
}
/* ============================================
Mobile Stacked View
============================================ */
.boxcart-stacked-list {
display: none;
flex-direction: column;
gap: 12px;
margin-top: var(--boxcart-frontend-spacing-lg);
padding: 0;
width: 100%;
}
/* Mobile card uses the same class as PHP template */
.boxcart-product-table__mobile-card {
position: relative;
background: var(--boxcart-frontend-background);
border-radius: var(--boxcart-frontend-radius-lg);
padding: 12px;
box-shadow: var(--boxcart-frontend-shadow-sm);
}
.boxcart-product-table__mobile-card--out-of-stock {
opacity: 0.6;
}
.boxcart-stacked-item__header {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.boxcart-stacked-item__favourite {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--boxcart-favourite-bg, rgba(255, 255, 255, 0.9));
box-shadow: var(--boxcart-favourite-shadow, 0 2px 4px rgba(0, 0, 0, 0.1));
cursor: pointer;
color: var(--boxcart-frontend-text-muted);
transition: all var(--boxcart-frontend-transition);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.boxcart-stacked-item__favourite:hover {
color: var(--boxcart-favourite-colour, #E25555);
}
.boxcart-stacked-item__favourite--active {
color: var(--boxcart-favourite-colour, #E25555);
}
.boxcart-stacked-item__favourite--active .boxcart-stacked-item__favourite-icon {
fill: currentColor;
}
.boxcart-stacked-item__favourite-icon {
display: block;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.boxcart-stacked-item__image {
width: 60px;
height: 60px;
border-radius: var(--boxcart-frontend-radius-md);
object-fit: cover;
background: var(--boxcart-frontend-background-alt);
flex-shrink: 0;
}
.boxcart-stacked-item__image--placeholder {
display: flex;
align-items: center;
justify-content: center;
color: var(--boxcart-frontend-text-muted);
}
.boxcart-stacked-item__info {
flex: 1;
min-width: 0;
}
.boxcart-stacked-item__name {
font-weight: 600;
color: var(--boxcart-frontend-text);
margin-bottom: 4px;
}
.boxcart-stacked-item__price {
font-weight: 700;
color: var(--boxcart-frontend-primary);
}
.boxcart-stacked-item__price-unit {
font-weight: 400;
color: var(--boxcart-frontend-text-muted);
font-size: 13px;
}
.boxcart-stacked-item__badge--out-of-stock {
display: inline-block;
padding: 2px 6px;
background: var(--boxcart-frontend-error);
color: var(--boxcart-frontend-background);
font-size: 10px;
font-weight: 600;
border-radius: var(--boxcart-frontend-radius-sm);
margin-top: 4px;
}
.boxcart-stacked-item__controls {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: nowrap;
}
.boxcart-stacked-item__unit-select {
flex: 1;
min-width: 100px;
}
.boxcart-stacked-item__unit-select .boxcart-unit-select {
width: 100%;
}
.boxcart-stacked-item__qty {
display: flex;
align-items: center;
gap: 4px;
}
/* Mobile controls row - unit scroll container and qty in same row */
.boxcart-stacked-item__controls .boxcart-unit-scroll-container {
flex: 1;
min-width: 0;
}
.boxcart-stacked-item__controls .boxcart-unit-buttons {
flex: 1;
min-width: 0;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 4px;
scroll-behavior: smooth;
}
.boxcart-stacked-item__controls .boxcart-unit-buttons::-webkit-scrollbar {
display: none;
}
.boxcart-stacked-item__controls .boxcart-unit-buttons .boxcart-table-unit-btn {
flex-shrink: 0;
}
.boxcart-stacked-item__controls .boxcart-table-qty {
flex-shrink: 0;
margin-left: auto;
}
.boxcart-stacked-item__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 10px;
}
.boxcart-stacked-item__footer .boxcart-table-qty {
flex-shrink: 0;
}
.boxcart-stacked-item__footer .boxcart-table-add-btn {
flex: 1;
padding: 10px 20px;
}
.boxcart-stacked-item__footer-left {
flex: 1;
}
.boxcart-stacked-item__total {
font-size: 13px;
color: var(--boxcart-frontend-text-muted);
}
.boxcart-stacked-item__total strong {
color: var(--boxcart-frontend-primary);
}
/* Responsive - Hide table, show stacked when container is narrow */
/* Using container query so sidecart open/close affects the breakpoint */
@container boxcart-products (max-width: 920px) {
/* On narrow container, hide the desktop table when table view is active */
.boxcart-product-table-wrapper {
display: none !important;
}
/*
* Mobile stacked list visibility:
* - JS sets style="" (empty) when table view is active -> show as flex
* - JS sets style="display: none" when card view is active -> hide
* - Initial inline style from PHP also controls visibility
* Only override to flex when NOT explicitly hidden by inline style
*/
.boxcart-stacked-list:not([style*="display: none"]):not([style*="display:none"]) {
display: flex !important;
}
.boxcart-view-toggle {
margin-left: 0;
}
.boxcart-products__filters {
flex-wrap: wrap;
}
/* Larger touch targets for narrow/mobile views */
.boxcart-table-qty__btn {
width: 40px;
height: 40px;
}
.boxcart-table-qty__center {
height: 40px;
}
.boxcart-table-qty__input {
width: auto;
min-width: 40px;
max-width: 70px;
height: 40px;
flex: 1;
}
/* Qty input - wrapper specificity */
.boxcart-product-table-wrapper .boxcart-table-qty input.boxcart-table-qty__input,
.boxcart-stacked-list .boxcart-table-qty input.boxcart-table-qty__input {
width: auto;
min-width: 40px;
max-width: 70px;
height: 40px;
}
/* Allow qty selector to shrink on mobile */
.boxcart-stacked-item__footer .boxcart-table-qty {
flex-shrink: 1;
min-width: 0;
}
/* Add button styling */
.boxcart-table-add-btn {
padding: 10px 20px;
}
}
/* ==========================================================================
Very Small Screens (320px-420px) - Force Single Column
========================================================================== */
@container boxcart-products (max-width: 420px) {
/* Force single column on very small container regardless of mobile column setting */
.boxcart-products__grid--mobile-cols-2.boxcart-products__grid--cols-4,
.boxcart-products__grid--mobile-cols-2.boxcart-products__grid--cols-3,
.boxcart-products__grid--mobile-cols-2.boxcart-products__grid--cols-2,
.boxcart-products__grid--mobile-cols-2.boxcart-products__grid--cols-1 {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
Payment Method Selection
========================================================================== */
/* Payment section in sidebar */
.boxcart-checkout__payment-section {
padding: 16px 0;
}
.boxcart-checkout__payment-section .boxcart-checkout__subsection-title {
margin: 0 0 12px 0;
line-height: 1;
display: flex;
align-items: center;
}
/* Payment methods radio card list */
.boxcart-payment-methods {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.boxcart-payment-method {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border: 2px solid var(--boxcart-frontend-border, #DCDCDE);
border-radius: var(--boxcart-frontend-radius-md, 6px);
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease;
font-size: 14px;
background: var(--boxcart-frontend-background, #FFFFFF);
}
.boxcart-payment-method:hover {
border-color: var(--boxcart-frontend-primary, #2D7D5F);
background-color: var(--boxcart-frontend-primary-light, #E8F5F0);
}
.boxcart-payment-method--selected {
border-color: var(--boxcart-frontend-primary, #2D7D5F);
background-color: var(--boxcart-frontend-primary-light, #E8F5F0);
}
.boxcart-payment-method input[type="radio"] {
accent-color: var(--boxcart-frontend-primary, #2D7D5F);
width: 18px;
height: 18px;
margin: 0;
flex-shrink: 0;
}
.boxcart-payment-method__label {
font-weight: 500;
color: var(--boxcart-frontend-text, #2C3338);
}
/* Payment detail panels */
.boxcart-payment-detail {
padding: 14px;
background: var(--boxcart-frontend-background-alt, #F6F7F7);
border-radius: var(--boxcart-frontend-radius-md, 6px);
margin-top: 8px;
border: 1px solid var(--boxcart-frontend-border, #DCDCDE);
}
.boxcart-payment-detail__instructions {
margin: 0;
font-size: 13px;
color: var(--boxcart-frontend-text-light, #50575E);
line-height: 1.5;
}
.boxcart-payment-detail__bank-details {
margin-top: 10px;
padding: 10px;
background: var(--boxcart-frontend-background, #FFFFFF);
border-radius: var(--boxcart-frontend-radius-sm, 4px);
border: 1px solid var(--boxcart-frontend-border, #DCDCDE);
}
.boxcart-payment-detail__row {
display: flex;
justify-content: space-between;
padding: 3px 0;
font-size: 13px;
}
.boxcart-payment-detail__label {
color: var(--boxcart-frontend-text-muted, #787C82);
}
.boxcart-payment-detail__value {
font-weight: 500;
color: var(--boxcart-frontend-text, #2C3338);
}
.boxcart-payment-detail__errors {
margin-top: 8px;
padding: 8px 12px;
background: var(--boxcart-frontend-error-light, #FDEDED);
border: 1px solid var(--boxcart-frontend-error-border, #f5c6cb);
border-radius: var(--boxcart-frontend-radius-sm, 4px);
color: var(--boxcart-frontend-error, #C44B4B);
font-size: 13px;
}
/* Stripe Payment Element container */
#boxcart-stripe-payment-element {
min-height: 100px;
}
/* ==========================================================================
Order Confirmation Payment
========================================================================== */
.boxcart-order-confirmation__payment {
margin-top: 20px;
padding: 20px;
background: var(--boxcart-frontend-background-alt, #F6F7F7);
border-radius: var(--boxcart-frontend-radius, 8px);
border: 1px solid var(--boxcart-frontend-border, #DCDCDE);
}
.boxcart-order-confirmation__payment-method {
margin: 0 0 8px 0;
font-size: 15px;
}
.boxcart-order-confirmation__payment-message {
margin: 0;
font-size: 14px;
color: var(--boxcart-frontend-text-light, #50575E);
line-height: 1.5;
}
.boxcart-order-confirmation__payment-message--success {
color: var(--boxcart-frontend-success-accent, #3D8B6E);
font-weight: 500;
}
.boxcart-order-confirmation__bank-details {
margin-top: 12px;
padding: 12px;
background: var(--boxcart-frontend-background, #FFFFFF);
border-radius: var(--boxcart-frontend-radius-md, 6px);
border: 1px solid var(--boxcart-frontend-border, #DCDCDE);
}
.boxcart-order-confirmation__bank-row {
display: flex;
justify-content: space-between;
padding: 4px 0;
font-size: 14px;
}
.boxcart-order-confirmation__bank-label {
color: var(--boxcart-frontend-text-muted, #787C82);
}
/* ==========================================================================
Customer Account Payment Info
========================================================================== */
.boxcart-account__order-payment {
margin-top: 16px;
padding: 16px;
background: var(--boxcart-frontend-background-alt, #F6F7F7);
border-radius: var(--boxcart-frontend-radius, 8px);
border: 1px solid var(--boxcart-frontend-border, #DCDCDE);
}
.boxcart-account__payment-row {
display: flex;
justify-content: space-between;
padding: 4px 0;
font-size: 14px;
}
.boxcart-account__payment-label {
color: var(--boxcart-frontend-text-muted, #787C82);
}
.boxcart-account__payment-status {
display: inline-block;
padding: 2px 8px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
border-radius: 3px;
color: #fff;
}
.boxcart-account__payment-status--pending {
background-color: #f0ad4e;
}
.boxcart-account__payment-status--awaiting_payment {
background-color: #ff9800;
}
.boxcart-account__payment-status--processing {
background-color: #5bc0de;
}
.boxcart-account__payment-status--paid {
background-color: #4caf50;
}
.boxcart-account__payment-status--failed {
background-color: #d9534f;
}
.boxcart-account__payment-status--refunded {
background-color: #9c27b0;
}
.boxcart-account__payment-status--cancelled {
background-color: #d9534f;
}
/* ============================================
Order Modal — Messages
============================================ */
.boxcart-order-modal__messages-thread {
max-height: 250px;
overflow-y: auto;
padding: 8px 0;
margin-bottom: 12px;
}
.boxcart-order-modal__messages {
margin-top: 16px;
}
.boxcart-order-message {
margin-bottom: 10px;
max-width: 85%;
}
.boxcart-order-message:last-child {
margin-bottom: 0;
}
.boxcart-order-message--admin {
margin-right: auto;
}
.boxcart-order-message--customer {
margin-left: auto;
}
.boxcart-order-message__header {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 3px;
font-size: 11px;
color: #999;
}
.boxcart-order-message__sender {
font-weight: 600;
color: #666;
}
.boxcart-order-message__body {
padding: 8px 12px;
border-radius: 12px;
font-size: 13px;
line-height: 1.5;
white-space: pre-wrap;
word-wrap: break-word;
}
.boxcart-order-message--admin .boxcart-order-message__body {
background-color: #f0f0f0;
color: #333;
border-top-left-radius: 4px;
}
.boxcart-order-message--customer .boxcart-order-message__body {
background-color: var(--boxcart-frontend-primary-light, #e8f5e9);
color: #1a1a1a;
border-top-right-radius: 4px;
}
.boxcart-order-message__empty {
color: #999;
font-size: 13px;
font-style: italic;
text-align: center;
padding: 12px 0;
margin: 0;
}
.boxcart-order-modal__messages-compose {
display: flex;
gap: 8px;
align-items: flex-end;
padding-top: 8px;
border-top: 1px solid #eee;
}
.boxcart-order-modal__messages-input {
flex: 1;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 16px;
font-family: inherit;
resize: none;
min-height: 36px;
line-height: 1.4;
}
.boxcart-order-modal__messages-input:focus {
outline: none;
border-color: var(--boxcart-frontend-primary, #2D7D5F);
}
.boxcart-order-modal__messages-send {
flex-shrink: 0;
padding: 4px 0;
font-size: 13px;
font-weight: 600;
font-family: inherit;
color: var(--boxcart-frontend-primary, #2D7D5F);
background: none;
border: none;
cursor: pointer;
min-height: 36px;
line-height: 1;
display: inline-flex;
align-items: flex-end;
}
.boxcart-order-modal__messages-send:hover {
color: var(--boxcart-frontend-primary-hover, #246850);
}
.boxcart-order-modal__messages-send:disabled {
color: var(--boxcart-frontend-text-muted, #787C82);
cursor: default;
}
/* ==========================================================================
Order Message Indicator (order tables / cards)
========================================================================== */
.boxcart-order-message-indicator {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 5px;
color: var(--boxcart-frontend-text-muted, #787C82);
vertical-align: middle;
position: relative;
top: -1px;
}
.boxcart-order-message-indicator svg {
display: block;
}
.boxcart-order-message-indicator--unread {
color: var(--boxcart-frontend-primary, #2D7D5F);
}
.boxcart-order-message-indicator[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
padding: 6px 10px;
background: #1E1E1E;
color: #fff;
font-size: 12px;
font-weight: 500;
line-height: 1.3;
white-space: nowrap;
border-radius: var(--boxcart-frontend-radius-sm, 4px);
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease, visibility 0.15s ease;
pointer-events: none;
z-index: 100;
}
.boxcart-order-message-indicator[data-tooltip]:hover::after {
opacity: 1;
visibility: visible;
}
/* ==========================================================================
Test Mode Indicator
========================================================================== */
.boxcart-test-mode-badge {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 9999;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #f59e0b;
color: #fff;
font-family: var(--boxcart-frontend-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
font-size: 13px;
font-weight: 600;
line-height: 1;
border: none;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 2px 12px rgba(245, 158, 11, 0.4);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.boxcart-test-mode-badge:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(245, 158, 11, 0.5);
}
.boxcart-test-mode-badge svg {
flex-shrink: 0;
}
/* Test Mode Modal (extends base .boxcart-modal) */
.boxcart-test-mode-overlay {
position: fixed;
inset: 0;
background: var(--boxcart-modal-overlay-bg, rgba(0, 0, 0, 0.5));
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.boxcart-test-mode-modal {
max-width: 520px;
}
.boxcart-test-mode__intro {
margin: 0 0 20px;
font-size: 14px;
line-height: 1.6;
color: var(--boxcart-frontend-text-secondary, #666);
}
.boxcart-test-mode__table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
margin-bottom: 16px;
}
.boxcart-test-mode__table th {
text-align: left;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--boxcart-frontend-text-secondary, #666);
padding: 8px 12px;
border-bottom: 2px solid var(--boxcart-frontend-border, #e5e7eb);
}
.boxcart-test-mode__table td {
padding: 10px 12px;
border-bottom: 1px solid var(--boxcart-frontend-border, #e5e7eb);
color: var(--boxcart-frontend-text-dark, #1a1a1a);
}
.boxcart-test-mode__table tbody tr:last-child td {
border-bottom: none;
}
.boxcart-test-mode__table code {
display: inline-block;
padding: 4px 8px;
background: var(--boxcart-frontend-surface, #f3f4f6);
border-radius: var(--boxcart-frontend-radius-sm, 4px);
font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
font-size: 13px;
letter-spacing: 0.03em;
transition: background 0.15s ease;
}
.boxcart-test-mode__table code:hover {
background: #fef3c7;
}
.boxcart-test-mode__hint {
margin: 0;
font-size: 12px;
color: var(--boxcart-frontend-text-tertiary, #999);
text-align: center;
}
@media (max-width: 480px) {
.boxcart-test-mode-badge {
bottom: 12px;
left: 12px;
font-size: 12px;
padding: 7px 12px;
}
}
/* ==========================================================================
Account sign-in page — small refinements
========================================================================== */
/* Add breathing room between a top-of-page notice (e.g. password-updated
success, or wrong-credentials error) and the login form/card below it. */
.boxcart-account--auth > .boxcart-notice {
margin-bottom: 1rem;
}
/* The footer line on the login form ("Don't have an account yet?...") sits
below the lost-password link. Center it, soften the size, and give it a
little breathing room from the link directly above. */
p.boxcart-account__no-account {
width: 100%;
display: block;
margin: 0.5rem 0 0;
padding-top: 0.5rem;
text-align: center;
font-size: 0.8rem;
color: var(--boxcart-frontend-text-muted, #6c757d);
line-height: 1.5;
}
/* ==========================================================================
Order modal — text sizing
Themes often apply aggressive h3/h4 styles via body-scoped rules, which
can leak into the order-view modal even when we declare an 18px title.
These rules use a deeper compound selector to win the cascade fight.
========================================================================== */
.boxcart-modal.boxcart-order-modal .boxcart-modal__body,
.boxcart-modal.boxcart-edit-modal .boxcart-modal__body,
.boxcart-modal.boxcart-password-modal .boxcart-modal__body,
.boxcart-modal.boxcart-reorder-modal .boxcart-modal__body,
.boxcart-modal.boxcart-signup-modal .boxcart-modal__body {
font-size: 14px;
line-height: 1.5;
}
.boxcart-modal.boxcart-order-modal h3.boxcart-modal__title,
.boxcart-modal.boxcart-edit-modal h3.boxcart-modal__title,
.boxcart-modal.boxcart-password-modal h3.boxcart-modal__title,
.boxcart-modal.boxcart-reorder-modal h3.boxcart-modal__title,
.boxcart-modal.boxcart-signup-modal h2.boxcart-modal__title,
.boxcart-modal.boxcart-signup-modal h3.boxcart-modal__title {
font-size: 18px;
line-height: 1.3;
font-weight: 600;
}
.boxcart-modal.boxcart-order-modal h4.boxcart-order-modal__section-title {
font-size: 12px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0 0 12px 0;
}
.boxcart-modal.boxcart-order-modal .boxcart-order-modal__location {
font-size: 16px;
font-weight: 600;
line-height: 1.3;
color: var(--boxcart-frontend-text, #1e1e1e);
margin: 0 0 8px;
}
.boxcart-modal.boxcart-order-modal .boxcart-order-modal__datetime,
.boxcart-modal.boxcart-order-modal .boxcart-order-modal__instructions,
.boxcart-modal.boxcart-order-modal .boxcart-order-modal__items,
.boxcart-modal.boxcart-order-modal .boxcart-order-modal__footer,
.boxcart-modal.boxcart-order-modal .boxcart-order-modal__meta {
font-size: 14px;
line-height: 1.5;
}
.boxcart-modal.boxcart-order-modal .boxcart-status-badge {
font-size: 12px;
line-height: 1.4;
}