/*******************************************
 * Malcolm Commerce Public Stylesheet
 * *****************************************
 * 
 * Author: Hicaliber
 * Author URL: hicaliber.com.au
 * 
 * Table of Contents:
 * - Off-canvas Cart
 * 
 ******************************************/

/*************************************
#OFF-CANVAS CART - START
**************************************/
.lp-off-canvas-cart {
    position: fixed;
    inset: 0;
    z-index: 999;
    visibility: hidden;
    transition: all 0.35s ease;
}
.lp-off-canvas-cart.lp-active {
    visibility: visible;
    transition: all 0.35s ease;
}
.lp-off-canvas-cart-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.lp-off-canvas-cart.lp-active .lp-off-canvas-cart-overlay {
    opacity: 1;
}
.lp-off-canvas-cart-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 90%;
    height: 100%;
    background: var(--lp-surface, #fff);
    box-shadow: -3px 0 12px rgba(0,0,0,0.15);
    transform: translateX(100%);
    transition: all 0.35s ease;
    display: flex;
    flex-direction: column;
}
.lp-off-canvas-cart.lp-active .lp-off-canvas-cart-container {
    transform: translateX(0);
    transition: all 0.35s ease;
}
.lp-off-canvas-cart-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--lp-border, #eee);
}
.lp-off-canvas-cart-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}
.mpp-continue-shop-button {
    background: none;
    border: none;
    font-size: 1.75rem;
    cursor: pointer;
    color: var(--lp-text, #333);
    line-height: 1;
}
.lp-off-canvas-cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}
.lp-off-canvas-cart .widget_shopping_cart_content {
    width: 100%;
}
.lp-off-canvas-cart .widget_shopping_cart_content .mini_cart_item {
    display: flex;
}
.lp-off-canvas-cart-footer {
    padding: 1.25rem;
    border-top: 1px solid var(--lp-border, #eee);
    gap: 0.5rem;
}
.lp-cart-qty {
    display: inline-block;
    margin-right: .5rem;
}
.lp-cart-qty .qty {
    width: 60px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: .25rem;
    font-size: 0.9rem;
}
/*************************************
#OFF-CANVAS CART - END
**************************************/

/*************************************
#PRODUCT FILTER - START
**************************************/
/* Menu Filter */
.lp-menu-item .lp-drop-down {
    cursor: pointer;
}
.lp-menu-item .lp-drop-down::after {
    content: "▼";
    font-size: 12px;
    display: inline-block;
}
.lp-menu-item.is-open > .lp-drop-down::after {
    transform: rotate(180deg);
}
/* Menu Filter */
/*************************************
#PRODUCT FILTER - END
**************************************/

/*************************************
#PRODUCT VARIATION FILTER - START
**************************************/
/* Hide Unavailable Variation Options setting — removes non-matching
   <option>s from view instead of leaving them disabled. */
.variations_form select option.mpp-option-hidden {
    display: none;
}
/* Same setting, radio/swatch attribute selectors - lp-hidden/lp-disabled
   land on the wrapping <label> (the visible/clickable unit, Launchpad
   Core's own lp-radio-option/lp-swatch-option), not the <input> itself.
   lp-disabled is present whenever an option is currently unavailable,
   regardless of this setting; lp-hidden is added on top only when it's
   on. The swatch/radio visuals themselves are Launchpad Core's
   (Launchpad\UI\Swatch\Swatch_Renderer / public/css/swatch.css) - this
   plugin only owns these two toggles on top of them. Visual treatment
   beyond hiding is intentionally left to the theme. */
.variations_form .lp-radio-option.lp-hidden,
.variations_form .lp-swatch-option.lp-hidden {
    display: none;
}
/*************************************
#PRODUCT VARIATION FILTER - END
**************************************/

/*************************************
#PRODUCT ATTRIBUTE SELECTOR - START
**************************************/
/* Wraps one Attribute's whole set of Radio/Swatch options (see
   Attribute_Selector::render()) - layout only; the options themselves are
   Launchpad Core's lp-radio-option/lp-swatch-option. */
.variations_form .mpp-attribute-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/*************************************
#PRODUCT ATTRIBUTE SELECTOR - END
**************************************/

/*************************************
#PRODUCT OPTION SELECTOR - START
**************************************/
/* Separate section from Product Attributes above (own heading, never
   merged in markup or data - see Option_Selector::render()), styled to
   read as part of the same configuration area. Radio/Swatch options
   themselves are Launchpad Core's lp-radio-option/lp-swatch-option,
   same as Attributes; Checkbox is Core's lp-checkbox-option. Table
   markup is hand-written to match WooCommerce's own .variations table
   structure exactly (th.label/td.value, role="presentation") rather than
   Launchpad Core's Table UI - borderless, reads as label/control rows,
   not a data grid. */
.mpp-product-options {
    margin-top: 1.5em;
}
.mpp-product-options-heading {
    margin: 0 0 0.75em;
}
.mpp-product-options-table,
.mpp-product-options-table tr,
.mpp-product-options-table th,
.mpp-product-options-table td {
    border: 0;
    background: none;
}
.mpp-product-options-table {
    width: 100%;
}
.mpp-product-options-table th.label {
    font-weight: 600;
    padding: 0.5em 1em 0.5em 0;
    vertical-align: top;
    white-space: nowrap;
    text-align: left;
}
.mpp-product-options-table td.value {
    padding: 0.5em 0;
    width: 100%;
}
.mpp-option-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mpp-option-controls--dropdown {
    display: block;
}
.mpp-option-price {
    color: var(--lp-muted-text, #6b7280);
    font-size: 0.9em;
}
/*************************************
#PRODUCT OPTION SELECTOR - END
**************************************/

/*************************************
#PRODUCT BOX ATTRIBUTES - START
**************************************/
/* Display-only catalogue Attribute Values summary on a Product Box (see
   product-attributes.php's "advanced layout" branch) - layout only; a
   swatch value's visual is Launchpad Core's
   (Launchpad\UI\Swatch\Swatch_Renderer / public/css/swatch.css), same as
   the interactive selector above. */
.mpp-product-attribute .lp-values {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.mpp-attribute-more-values,
.lp-has-more-option {
    color: var(--lp-muted-text, #6b7280);
    font-size: 0.9em;
}
/*************************************
#PRODUCT BOX ATTRIBUTES - END
**************************************/

/*************************************
#PRODUCT BOX OPTIONS - START
**************************************/
/* Display-only Option Values summary on a Product Box (see
   product-options.php) - layout only; a swatch value's visual is
   Launchpad Core's (Launchpad\UI\Swatch\Swatch_Renderer /
   public/css/swatch.css), same as the Attributes box display above. */
.mpp-product-option .lp-values {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.mpp-option-more-values {
    color: var(--lp-muted-text, #6b7280);
    font-size: 0.9em;
}
/*************************************
#PRODUCT BOX OPTIONS - END
**************************************/

/*************************************
#PRODUCT LISTS - START
**************************************/
.mpp-cart .lp-lists-toggle-wrapper {
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
}
.variations_form .mpp-single-variation-lists-toggle {
    margin-top: 12px;
}
/*************************************
#PRODUCT LISTS - END
**************************************/

/*************************************
#PRODUCT QTY PRICING - START
**************************************/
.mpp-quantity-pricing-table .mpp-quantity-pricing-table-row {
    display: flex;
}
.mpp-quantity-pricing-table .mpp-quantity-pricing-table-row > span:first-of-type {
    min-width: 150px;
}
/*************************************
#PRODUCT QTY PRICING - END
**************************************/