/*
 * Less variables
 */

@internal-woocommerce-path:                             "../../../../../../plugins/woocommerce";
@internal-woocommerce-icon-font-path:                   "../../../../../../plugins/woocommerce/assets/fonts";

//
// Alert
//

@woocommerce-alert-button-inverse-mode:                 ~''; // inverse

//
// Shop page
//

@woocommerce-shop-page-title-margin-bottom:             0;
@woocommerce-shop-page-title-font-size:                 @base-h5-font-size;
@woocommerce-shop-page-title-line-height:               @base-h5-line-height;
@woocommerce-shop-page-title-color:                     @base-h5-color;
@woocommerce-shop-page-title-font-family:               @base-h5-font-family;
@woocommerce-shop-page-title-font-weight:               @base-h5-font-weight;
@woocommerce-shop-page-title-text-transform:            @base-h5-text-transform;
@woocommerce-shop-page-title-letter-spacing:            @base-h5-letter-spacing;
@woocommerce-shop-page-title-font-style:                @base-h5-font-style;

@woocommerce-shop-page-rating-margin-top:               0;
@woocommerce-shop-page-rating-margin-bottom:            0;

@woocommerce-shop-page-price-margin-top:                0;
@woocommerce-shop-page-price-font-size:                 @text-small-font-size;
@woocommerce-shop-page-price-line-height:               @text-small-line-height;
@woocommerce-shop-page-price-font-family:               inherit;
@woocommerce-shop-page-price-font-weight:               inherit;
@woocommerce-shop-page-price-text-transform:            inherit;
@woocommerce-shop-page-price-letter-spacing:            inherit;
@woocommerce-shop-page-price-font-style:                inherit;
@woocommerce-shop-page-price-color:                     @global-color;
@woocommerce-shop-page-price-sale-margin-horizontal:    0;

//
// Single product page
//

@woocommerce-product-page-title-margin-bottom:          0;
@woocommerce-product-page-title-font-size-m:            @base-h2-font-size-m;
@woocommerce-product-page-title-font-size:              @base-h2-font-size;
@woocommerce-product-page-title-line-height:            @base-h2-line-height;
@woocommerce-product-page-title-color:                  @base-h2-color;
@woocommerce-product-page-title-font-family:            @base-h2-font-family;
@woocommerce-product-page-title-font-weight:            @base-h2-font-weight;
@woocommerce-product-page-title-text-transform:         @base-h2-text-transform;
@woocommerce-product-page-title-letter-spacing:         @base-h2-letter-spacing;
@woocommerce-product-page-title-font-style:             @base-h2-font-style;

@woocommerce-product-page-rating-margin-top:            0;
@woocommerce-product-page-rating-margin-bottom:         @global-margin;

@woocommerce-product-page-price-margin-top:             @global-margin;
@woocommerce-product-page-price-margin-bottom:          @global-margin;
@woocommerce-product-page-price-font-size:              @global-font-size;
@woocommerce-product-page-price-line-height:            1.5;
@woocommerce-product-page-price-font-family:            inherit;
@woocommerce-product-page-price-font-weight:            inherit;
@woocommerce-product-page-price-text-transform:         inherit;
@woocommerce-product-page-price-letter-spacing:         inherit;
@woocommerce-product-page-price-font-style:             inherit;
@woocommerce-product-page-price-color:                  @global-emphasis-color;
@woocommerce-product-page-price-sale-margin-horizontal: 0;

@woocommerce-product-page-price-from-font-size:         inherit;
@woocommerce-product-page-price-from-line-height:       inherit;
@woocommerce-product-page-price-from-font-family:       inherit;
@woocommerce-product-page-price-from-font-weight:       inherit;
@woocommerce-product-page-price-from-text-transform:    inherit;
@woocommerce-product-page-price-from-letter-spacing:    inherit;
@woocommerce-product-page-price-from-font-style:        inherit;
@woocommerce-product-page-price-from-vertical-align:    inherit;

@woocommerce-product-page-add-to-cart-large:            false;
@woocommerce-product-page-add-to-cart-expand:           false;
@woocommerce-product-page-add-to-cart-reset-button:     false;

//
// Cart page
//

@woocommerce-cart-page-layout:                          classic; // classic, columns
@woocommerce-cart-page-order-column-width-l:            ~"(100% * 2 / 5.001)";

//
// Checkout page
//

@woocommerce-checkout-page-order-column-width-l:        ~"(100% * 2 / 5.001)";

//
// Order page
//

@woocommerce-order-page-layout:                         classic; // classic, columns
@woocommerce-order-page-order-column-width-l:           ~"(100% * 2 / 5.001)";

//
// Sale Price
//

@woocommerce-price-sale-font-weight:                    inherit;
@woocommerce-price-sale-color:                          inherit;
@woocommerce-price-regular-font-weight:                 inherit;
@woocommerce-price-regular-color:                       @text-muted-color;

//
// Rating
//

@woocommerce-rating-font-size:                          @global-small-font-size;
@woocommerce-rating-background-color:                   darken(@global-muted-background, 10%);
@woocommerce-rating-color:                              @global-warning-background;

//
// Review Link
//

@woocommerce-review-link-font-size:                     @global-small-font-size;
@woocommerce-review-link-line-height:                   1.5;

//
// My Account page
//

@woocommerce-myaccount-page-grid-divider:               true;

//
// Widgets
//

@woocommerce-widget-font-size:                          @global-small-font-size;
@woocommerce-widget-line-height:                        1.5;
@woocommerce-widget-link-color:                         @global-emphasis-color;
@woocommerce-widget-link-hover-color:                   @global-color;

@woocommerce-widget-active-filters-gutter:              7px;
@woocommerce-widget-active-filters-padding-vertical:    3px;
@woocommerce-widget-active-filters-padding-horizontal:  7px;
@woocommerce-widget-active-filters-border-radius:       @global-border-radius;
@woocommerce-widget-active-filters-font-size:           @global-small-font-size;
@woocommerce-widget-active-filters-background:          @global-muted-background;
@woocommerce-widget-active-filters-color:               @global-muted-color;
@woocommerce-widget-active-filters-border-width:        0;
@woocommerce-widget-active-filters-border:              transparent;

@woocommerce-widget-active-filters-hover-background:    darken(@woocommerce-widget-active-filters-background, 5%);
@woocommerce-widget-active-filters-hover-color:         @global-color;
@woocommerce-widget-active-filters-hover-border:        transparent;

@inverse-woocommerce-widget-active-filters-background:               @inverse-global-muted-background;
@inverse-woocommerce-widget-active-filters-color:                    @inverse-global-muted-color;
@inverse-woocommerce-widget-active-filters-border:                   transparent;
@inverse-woocommerce-widget-active-filters-hover-background:         fadein(@inverse-woocommerce-widget-active-filters-background, 5%);
@inverse-woocommerce-widget-active-filters-hover-color:              @inverse-global-color;
@inverse-woocommerce-widget-active-filters-hover-border:             transparent;

@woocommerce-filter-element-column-count-break:                     10;
@internal-woocommerce-filter-element-column-count-break-2:          @woocommerce-filter-element-column-count-break * 2;
@internal-woocommerce-filter-element-column-count-break-3:          @woocommerce-filter-element-column-count-break * 3;
@internal-woocommerce-filter-element-column-count-break-4:          @woocommerce-filter-element-column-count-break * 4;
@internal-woocommerce-filter-element-column-count-break-5:          @woocommerce-filter-element-column-count-break * 5;

/*
 * Mixins
 */

.iconbefore(@glyph: "\e001") {
    font-family: WooCommerce;
    speak: never;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    margin-right: .618em;
    content: @glyph;
    text-decoration: none;
}

.loader() {
    &::before {
        height: 1em;
        width: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -.5em;
        margin-top: -.5em;
        display: block;
        content: "";
        color: @global-emphasis-color;
        border-radius: 50%;
        border: 1px solid;
        border-color: currentColor currentColor currentColor transparent;
        font-size: 2em;
        animation: woocommerce-spinner 1s linear infinite;
    }
}

@keyframes woocommerce-spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*
 * Fonts
 */

@font-face {
    font-family: WooCommerce;
    src: url('@{internal-woocommerce-icon-font-path}/WooCommerce.eot');
    src: url('@{internal-woocommerce-icon-font-path}/WooCommerce.eot?#iefix') format("embedded-opentype"),
         url('@{internal-woocommerce-icon-font-path}/WooCommerce.woff') format("woff"),
         url('@{internal-woocommerce-icon-font-path}/WooCommerce.ttf') format("truetype"),
         url('@{internal-woocommerce-icon-font-path}/WooCommerce.svg#WooCommerce') format("svg");
    font-weight: 400;
    font-style: normal;
}

/*
 * Global styles
 ========================================================================== */

.woocommerce-store-notice {
    // uk-position-top
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    z-index: @global-z-index + 40;
    // reset p
    margin: 0;
    // uk-section-xsmall
    padding-top: @section-xsmall-padding-vertical;
    padding-bottom: @section-xsmall-padding-vertical;
    // uk-section-muted
    background: @section-muted-background;
    .hook-section-muted();
    // uk-container
    padding-left: @container-padding-horizontal;
    padding-right: @container-padding-horizontal;
    // Style
    text-align: center;
}

/*
* Alert Messages
*/

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    margin-top: 0; // Needed because of `woocommerce-notices-wrapper`
    list-style: none;
    // uk-alert
    position: relative;
    margin-bottom: @alert-margin-vertical;
    padding: @alert-padding @alert-padding-right @alert-padding @alert-padding;
    background: @alert-background;
    color: @alert-color;
    .hook-alert();
}

.woocommerce-message {

    .button { vertical-align: baseline; }

}

.woocommerce-error,
.woocommerce-info {

    /* Phone landscape and bigger */
    @media (min-width: @breakpoint-small) {
        .button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: @alert-padding;
        }
    }

    /* Phone landscape and smaller */
    @media (max-width: @breakpoint-small-max) {
        .button { margin-left: @margin-xsmall-margin; }
    }
}


.woocommerce-info {}

.woocommerce-error {
    background: @alert-danger-background;
    color: @alert-danger-color;
    .hook-alert-danger();

    > li > a,
    > li > a:hover {
        color: inherit;
        text-decoration: none;
    }
}

/*
 * oEmbeds
 */

.woocommerce-oembed { position: relative; }

/*
 * Breadcrumbs
 */

.woocommerce-breadcrumb {
    margin: 0 0 @global-margin;
    // uk-breadcrumb
    font-size: @breadcrumb-item-font-size;
    color: @breadcrumb-item-active-color;

    a { color: @breadcrumb-item-color; }

    a:hover {
        color: @breadcrumb-item-hover-color;
        text-decoration: @breadcrumb-item-hover-text-decoration;
    }
}

.hook-inverse() {

    .woocommerce-breadcrumb {
        color: @inverse-breadcrumb-item-active-color;

        a { color: @inverse-breadcrumb-item-color; }

        a:hover { color: @inverse-breadcrumb-item-hover-color; }

    }

}

/*
 * Mark
 */

.woocommerce mark {
    background: transparent;
    color: inherit;
}

/*
* Forms
*/

.woocommerce {

    input.input-text, // Exclude textareas with this class
    select,
    textarea,
    input[type="radio"],
    input[type="checkbox"] {
        box-sizing: border-box;
        margin: 0;
        border-radius: 0;
        font: inherit;
    }

    select { text-transform: none; }
    select optgroup {
        font: inherit;
        font-weight: bold;
    }

    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button { height: auto; }

    input.input-text::-moz-placeholder,
    textarea::-moz-placeholder { opacity: 1; }

    input[type="radio"]:not(:disabled),
    input[type="checkbox"]:not(:disabled) { cursor: pointer; }

    fieldset {
        border: none;
        margin: 0;
        padding: 0;
    }

    input.input-text,
    textarea { -webkit-appearance: none; }

    //
    // Input + Select + Textarea
    //

    input.input-text,
    select,
    textarea {
        max-width: 100%;
        width: 100%;
        border: 0 none;
        padding: 0 @form-padding-horizontal;
        background: @form-background;
        color: @form-color;
        .hook-form();
    }

    // Single-line
    input.input-text,
    select:not([multiple]):not([size]) {
        height: @form-height;
        vertical-align: middle;
        display: inline-block;
        .hook-form-single-line();
    }

    // Multi-line
    select[multiple],
    select[size],
    textarea {
        min-height: 150px;
        padding-top: @form-multi-line-padding-vertical;
        padding-bottom: @form-multi-line-padding-vertical;
        vertical-align: top;
        .hook-form-multi-line();
    }

    select[multiple],
    select[size] { resize: vertical; }

    // Focus
    input.input-text:focus,
    select:focus,
    textarea:focus {
        outline: none;
        background-color: @form-focus-background;
        color: @form-focus-color;
        .hook-form-focus();
    }

    // Disabled
    input.input-text:disabled,
    select:disabled,
    textarea:disabled {
        background-color: @form-disabled-background;
        color: @form-disabled-color;
        .hook-form-disabled();
    }

    input.input-text::-ms-input-placeholder { color: @form-placeholder-color !important; }
    input.input-text::placeholder { color: @form-placeholder-color; }

    textarea::-ms-input-placeholder { color: @form-placeholder-color !important; }
    textarea::placeholder { color: @form-placeholder-color; }

    //
    // Select
    //

    select:not([multiple]):not([size]) {
        -webkit-appearance: none;
        -moz-appearance: none;
        padding-right: @form-select-padding-right;
        .svg-fill(@internal-form-select-image, "#000", @form-select-icon-color);
        background-repeat: no-repeat;
        background-position: 100% 50%;
    }

    select:not([multiple]):not([size])::-ms-expand { display: none; }

    select:not([multiple]):not([size]) option { color: @form-select-option-color; }

    // Disabled
    select:not([multiple]):not([size]):disabled { .svg-fill(@internal-form-select-image, "#000", @form-select-disabled-icon-color); }

    //
    // Radio
    //

    input[type="radio"],
    input[type="checkbox"] {
        display: inline-block;
        height: @form-radio-size;
        width: @form-radio-size !important; // !important needed to override `width: auto` set by securionpay plugin
        overflow: hidden;
        margin-top: @form-radio-margin-top;
        vertical-align: middle;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: @form-radio-background;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        .hook-form-radio();
    }

    input[type="radio"] { border-radius: 50%; }

    // Focus
    input[type="radio"]:focus,
    input[type="checkbox"]:focus {
        outline: none;
        background-color: @form-radio-focus-background;
        .hook-form-radio-focus();
    }

    // Checked
    input[type="radio"]:checked,
    input[type="checkbox"]:checked,
    input[type="checkbox"]:indeterminate {
        background-color: @form-radio-checked-background;
        .hook-form-radio-checked();
    }

    input[type="radio"]:checked:focus,
    input[type="checkbox"]:checked:focus,
    input[type="checkbox"]:indeterminate:focus {
        background-color: @form-radio-checked-focus-background;
        .hook-form-radio-checked-focus();
    }

    // Icons
    input[type="radio"]:checked { .svg-fill(@internal-form-radio-image, "#000", @form-radio-checked-icon-color); }
    input[type="checkbox"]:checked { .svg-fill(@internal-form-checkbox-image, "#000", @form-radio-checked-icon-color); }
    input[type="checkbox"]:indeterminate { .svg-fill(@internal-form-checkbox-indeterminate-image, "#000", @form-radio-checked-icon-color); }

    // Disabled
    input[type="radio"]:disabled,
    input[type="checkbox"]:disabled {
        background-color: @form-radio-disabled-background;
        .hook-form-radio-disabled();
    }

    input[type="radio"]:disabled:checked { .svg-fill(@internal-form-radio-image, "#000", @form-radio-disabled-icon-color); }
    input[type="checkbox"]:disabled:checked { .svg-fill(@internal-form-checkbox-image, "#000", @form-radio-disabled-icon-color); }
    input[type="checkbox"]:disabled:indeterminate { .svg-fill(@internal-form-checkbox-indeterminate-image, "#000", @form-radio-disabled-icon-color); }

    .woocommerce-invalid {

        input.input-text,
        select,
        textarea {
            color: @form-danger-color;
            .hook-form-danger();
        }
    }

    .woocommerce-validated {}

    input.input-text.qty {
        width: 5em;
        text-align: center;
    }

}

.hook-inverse() {

    .woocommerce {

        & input.input-text,
        & select,
        & textarea {
            background-color: @inverse-form-background;
            color: @inverse-form-color;
            background-clip: padding-box;
            .hook-inverse-form();

            &:focus {
                background-color: @inverse-form-focus-background;
                color: @inverse-form-focus-color;
                .hook-inverse-form-focus();
            }
        }

        & input.input-text::-ms-input-placeholder { color: @inverse-form-placeholder-color !important; }
        & input.input-text::placeholder { color: @inverse-form-placeholder-color; }

        & textarea::-ms-input-placeholder { color: @inverse-form-placeholder-color !important; }
        & textarea::placeholder { color: @inverse-form-placeholder-color; }

        //
        // Select
        //

        & select:not([multiple]):not([size]) { .svg-fill(@internal-form-select-image, "#000", @inverse-form-select-icon-color); }

        //
        // Radio and checkbox
        //

        & input[type="radio"],
        & input[type="checkbox"] {
            background-color: @inverse-form-radio-background;
            .hook-inverse-form-radio();
        }

        // Focus
        & input[type="radio"]:focus,
        & input[type="checkbox"]:focus {
            .hook-inverse-form-radio-focus();
        }

        // Checked
        & input[type="radio"]:checked,
        & input[type="checkbox"]:checked,
        & input[type="checkbox"]:indeterminate {
            background-color: @inverse-form-radio-checked-background;
            .hook-inverse-form-radio-checked();
        }

        // Focus
        & input[type="radio"]:checked:focus,
        & input[type="checkbox"]:checked:focus,
        & input[type="checkbox"]:indeterminate:focus {
            background-color: @inverse-form-radio-checked-focus-background;
            .hook-inverse-form-radio-checked-focus();
        }

        // Icon
        & input[type="radio"]:checked { .svg-fill(@internal-form-radio-image, "#000", @inverse-form-radio-checked-icon-color); }
        & input[type="checkbox"]:checked { .svg-fill(@internal-form-checkbox-image, "#000", @inverse-form-radio-checked-icon-color); }
        & input[type="checkbox"]:indeterminate { .svg-fill(@internal-form-checkbox-indeterminate-image, "#000", @inverse-form-radio-checked-icon-color); }

    }
}

/*
 * Buttons
 */

// Scope
:where(.woocommerce) {

    .button,
    input[type="submit"] {
        // uk-button
        margin: 0;
        border: none;
        overflow: visible;
        font: inherit;
        color: inherit;
        text-transform: none;
        -webkit-appearance: none;
        border-radius: 0;
        display: inline-block;
        box-sizing: border-box;
        padding: 0 @button-padding-horizontal;
        vertical-align: middle;
        font-size: @button-font-size;
        line-height: @button-line-height;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        .hook-button();

        &::-moz-focus-inner {
            border: 0;
            padding: 0;
        }

        &:hover {
            text-decoration: none;
            .hook-button-hover();
        }

        &:active {
            .hook-button-active();
        }
    }
}

.button,
input[type="submit"] {

    // Default
    :not(.woocommerce-message) > &:not(.alt, .checkout, .view, .pay, [name*="save_"]) {
        background-color: @button-default-background;
        color: @button-default-color;
        .hook-button-default();
    }

    :not(.woocommerce-message) > &:not(.alt, .checkout, .view, .pay, [name*="save_"]):hover {
        background-color: @button-default-hover-background;
        color: @button-default-hover-color;
        .hook-button-default-hover();
    }

    :not(.woocommerce-message) > &:not(.alt, .checkout, .view, .pay, [name*="save_"]):active {
        background-color: @button-default-active-background;
        color: @button-default-active-color;
        .hook-button-default-active();
    }

    :not(.woocommerce-message) > &:not(.alt, .checkout, .view, .pay, [name*="save_"])::after:extend(.uk-button-default) when (@internal-button-default-mode = glow) {}
    :not(.woocommerce-message) > &:not(.alt, .checkout, .view, .pay, [name*="save_"]):hover::after:extend(.uk-button-default:hover) when (@internal-button-default-mode = glow) {}
    :not(.woocommerce-message) > &:not(.alt, .checkout, .view, .pay, [name*="save_"]):active::after:extend(.uk-button-default:active) when (@internal-button-default-mode = glow) {}

    // Primary
    &.alt,
    &.checkout,
    &.view,
    &.pay,
    &[name*="save_"] {
        background-color: @button-primary-background;
        color: @button-primary-color;
        .hook-button-primary();
    }

    &.alt:hover,
    &.checkout:hover,
    &.view:hover,
    &.pay:hover,
    &[name*="save_"]:hover {
        background-color: @button-primary-hover-background;
        color: @button-primary-hover-color;
        .hook-button-primary-hover();
    }

    &.alt:active,
    &.checkout:active,
    &.view:active,
    &.pay:active,
    &[name*="save_"]:active {
        background-color: @button-primary-active-background;
        color: @button-primary-active-color;
        .hook-button-primary-active();
    }

    &.alt::after:extend(.uk-button-primary) when (@internal-button-primary-mode = glow) {}
    &.alt:hover::after:extend(.uk-button-primary:hover) when (@internal-button-primary-mode = glow) {}
    &.alt:active::after:extend(.uk-button-primary:active) when (@internal-button-primary-mode = glow) {}

    &.checkout::after:extend(.uk-button-primary) when (@internal-button-primary-mode = glow) {}
    &.checkout:hover::after:extend(.uk-button-primary:hover) when (@internal-button-primary-mode = glow) {}
    &.checkout:active::after:extend(.uk-button-primary:active) when (@internal-button-primary-mode = glow) {}

    &.view::after:extend(.uk-button-primary) when (@internal-button-primary-mode = glow) {}
    &.view:hover::after:extend(.uk-button-primary:hover) when (@internal-button-primary-mode = glow) {}
    &.view:active::after:extend(.uk-button-primary:active) when (@internal-button-primary-mode = glow) {}

    &.pay::after:extend(.uk-button-primary) when (@internal-button-primary-mode = glow) {}
    &.pay:hover::after:extend(.uk-button-primary:hover) when (@internal-button-primary-mode = glow) {}
    &.pay:active::after:extend(.uk-button-primary:active) when (@internal-button-primary-mode = glow) {}

    &[name*="save_"]::after:extend(.uk-button-primary) when (@internal-button-primary-mode = glow) {}
    &[name*="save_"]:hover::after:extend(.uk-button-primary:hover) when (@internal-button-primary-mode = glow) {}
    &[name*="save_"]:active::after:extend(.uk-button-primary:active) when (@internal-button-primary-mode = glow) {}

    // Link
    .woocommerce-message > & {
        padding: 0;
        font-size: @global-font-size;
        line-height: @global-line-height;
        background: none;
        color: @base-link-color;
        .hook-button-link();
        text-decoration: @base-link-text-decoration;
    }

    .woocommerce-message > & when not (@button-font-family = inherit) { font-family: @global-font-family; }
    .woocommerce-message > & when not (@button-font-weight = inherit) { font-weight: @base-body-font-weight; }
    .woocommerce-message > & when not (@button-text-transform = inherit) { text-transform: none; }
    .woocommerce-message > & when not (@button-letter-spacing = inherit) { letter-spacing: normal; }
    .woocommerce-message > & when not (@button-font-style = inherit) { font-style: normal; }

    .woocommerce-message > &:hover {
        color: @base-link-hover-color;
        text-decoration: @base-link-hover-text-decoration;
    }

    // Override for some styles
    .woocommerce-message > & when not (@woocommerce-alert-button-inverse-mode = ~'') {
        color: @inverse-base-link-color;
        .hook-inverse-button-link();
    }
    .woocommerce-message > &:hover when not (@woocommerce-alert-button-inverse-mode = ~'') { color: @inverse-base-link-hover-color; }
}

.hook-inverse() {

    .button,
    input[type="submit"] {

        // Default
        :not(.woocommerce-message) > &:not(.alt, .checkout, .view, .pay, [name*="save_"]) {
            background-color: @inverse-button-default-background;
            color: @inverse-button-default-color;
            .hook-inverse-button-default();
        }

        :not(.woocommerce-message) > &:not(.alt, .checkout, .view, .pay, [name*="save_"]):hover {
            background-color: @inverse-button-default-hover-background;
            color: @inverse-button-default-hover-color;
            .hook-inverse-button-default-hover();
        }

        :not(.woocommerce-message) > &:not(.alt, .checkout, .view, .pay, [name*="save_"]):active {
            background-color: @inverse-button-default-active-background;
            color: @inverse-button-default-active-color;
            .hook-inverse-button-default-active();
        }

        // Primary
        &.alt,
        &.checkout,
        &.view,
        &.pay,
        &[name*="save_"] {
            background-color: @inverse-button-primary-background;
            color: @inverse-button-primary-color;
            .hook-inverse-button-primary();
        }

        &.alt:hover,
        &.checkout:hover,
        &.view:hover,
        &.pay:hover,
        &[name*="save_"]:hover {
            background-color: @inverse-button-primary-hover-background;
            color: @inverse-button-primary-hover-color;
            .hook-inverse-button-primary-hover();
        }

        &.alt:active,
        &.checkout:active,
        &.view:active,
        &.pay:active,
        &[name*="save_"]:active {
            background-color: @inverse-button-primary-active-background;
            color: @inverse-button-primary-active-color;
            .hook-inverse-button-primary-active();
        }

        // Link
        .woocommerce-message > & {
            color: @inverse-base-link-color;
            .hook-inverse-button-link();
        }

        .woocommerce-message > &:hover { color: @inverse-base-link-hover-color; }

    }
}

/*
 * Price
 */

.price,
.woocommerce-grouped-product-list-item__price,
.product_list_widget {

    del {
        // Reset
        color: @woocommerce-price-regular-color;
    }

    del when not (@woocommerce-price-regular-font-weight = inherit) {
        font-weight: @woocommerce-price-regular-font-weight;
    }

    ins {
        // Reset
        background: transparent;
        color: @woocommerce-price-sale-color;
    }

    ins when not (@woocommerce-price-sale-font-weight = inherit) {
        font-weight: @woocommerce-price-sale-font-weight;
    }

}

.hook-inverse() {

    .price,
    .woocommerce-grouped-product-list-item__price,
    .product_list_widget {
        del { color: @inverse-text-muted-color; }
        ins { color: @inverse-global-color; }
    }

}

.price { display: block; }

/*
 * Price in List Widgets
 */

// .product_list_widget {

//     > .amount { color: @global-color; }

// }

// .hook-inverse() {

//     .product_list_widget {

//         > .amount { color: @inverse-global-color; }
//     }

// }

/*
 * Badge
 */

.onsale {
    position: absolute;
    top: @card-badge-top;
    left: @card-badge-right;
    z-index: 1;
    height: @card-badge-height;
    padding-left: @card-badge-padding-horizontal;
    padding-right: @card-badge-padding-horizontal;
    background: @card-badge-background;
    color: @card-badge-color;
    font-size: @card-badge-font-size;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
    .hook-card-badge();
}

/*
 * Remove from cart
 */

a.remove {
    font-size: 1.5em;
    text-decoration: none;
    // Increase click area
    display: inline-flex;
    width: 20px;
    height: 20px;
    justify-content: center;
    align-items: center;
    // uk-close
    color: @close-color;
    .hook-close();

    &:hover {
        text-decoration: none;
        // uk-close
        color: @close-hover-color;
        .hook-close-hover();
    }
}

.hook-inverse() {

    a.remove {
        color: @inverse-close-color;
        .hook-inverse-close();

        &:hover {
            color: @inverse-close-hover-color;
            .hook-inverse-close-hover();
        }
    }

}

/*
 * Remove coupon
 */

a.woocommerce-remove-coupon {
    display: block;
    font-size: @global-small-font-size;
    line-height: @text-small-line-height;
    color: @base-link-color;
    text-decoration: none !important;
}

a.woocommerce-remove-coupon:hover { color: @base-link-hover-color; }

/*
 * Count
 */

// .count { font-size: @base-small-font-size; }

/*
 * Star ratings
 */

.star-rating {
    display: inline-block;
    overflow: hidden;
    position: relative;
    height: 1em;
    line-height: 1;
    font-size: @woocommerce-rating-font-size;
    // font-family: star;
    font-family: WooCommerce;
    vertical-align: middle;
    white-space: nowrap; // Prevent hidden text from wrapping

    &::before {
        content: "\e020\e020\e020\e020\e020";
        color: @woocommerce-rating-background-color;
    }

    span {
        display: block;
        top: 0;
        left: 0;
        position: absolute;
        overflow: hidden;
    }

    span::before {
        content: "\e020\e020\e020\e020\e020";
        color: @woocommerce-rating-color;
    }
}

.hook-inverse() {
    .star-rating::before { color: @inverse-global-muted-color; }
    .star-rating span::before { color: @inverse-global-emphasis-color; }
}

// Rating as Source
.tm-source-woo-rating > .star-rating { font-size: inherit; }

.star-rating + .woocommerce-review-link { vertical-align: middle; }

.woocommerce-review-link {
    font-size: @woocommerce-review-link-font-size;
    line-height: @woocommerce-review-link-line-height;
    // link text
    color: inherit;
    .hook-link-text();
}

.woocommerce-review-link:hover {
    color: @link-text-hover-color;
    .hook-link-text-hover();
}

.hook-inverse() {
    .woocommerce-review-link:hover {
        color: @inverse-link-text-hover-color;
        .hook-inverse-link-text-hover();
    }
}

/*
 * Pagination
 */

.woocommerce-pagination {
    margin-top: @global-medium-margin;

    ul.page-numbers {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-left: -@pagination-margin-horizontal;
        padding: 0;
        list-style: none;
        .hook-pagination();
    }

    ul.page-numbers > * {
        flex: none;
        padding-left: @pagination-margin-horizontal;
        position: relative;
    }

    ul.page-numbers > * > * {
        display: block;
        padding: @pagination-item-padding-vertical @pagination-item-padding-horizontal;
        color: @pagination-item-color;
        .hook-pagination-item();
    }

    /* Hover + Focus */
    ul.page-numbers > * > :hover {
        color: @pagination-item-hover-color;
        text-decoration: @pagination-item-hover-text-decoration;
        .hook-pagination-item-hover();
    }

    /* Active */
    ul.page-numbers > * > .current {
        color: @pagination-item-active-color;
        .hook-pagination-item-active();
    }

    ul.page-numbers > * > *::after:extend(.uk-pagination > * > *) when (@internal-pagination-item-mode = glow) {}
    ul.page-numbers > * > :hover::after:extend(.uk-pagination > * > :hover) when (@internal-pagination-item-mode = glow) {}
    ul.page-numbers > * > .current::after:extend(.uk-pagination > .uk-active > *) when (@internal-pagination-item-mode = glow) {}

}

.hook-inverse() {

    ul.page-numbers > * > * {
        color: @inverse-pagination-item-color;
        .hook-inverse-pagination-item();
    }

    ul.page-numbers > * > :hover {
        color: @inverse-pagination-item-hover-color;
        .hook-inverse-pagination-item-hover();
    }

    ul.page-numbers > * > .current {
        color: @inverse-pagination-item-active-color;
        .hook-inverse-pagination-item-active();
    }

}

/*
 * 2 Column Layout
 * `u-columns`: Addresses + Login/Registration Page
 * `.woocommerce-column`: Order Page
 */

.u-columns,
.woocommerce-columns {
    // uk-grid
    display: flex;
    flex-wrap: wrap;
    margin-top: -@grid-gutter-vertical;
    margin-left: -@grid-gutter-horizontal;
}

.u-columns > *,
.woocommerce-columns > * {
    // uk-grid
    padding-top: @grid-gutter-vertical;
    padding-left: @grid-gutter-horizontal;
    // uk-width
    box-sizing: border-box;
    width: 100%;
}

/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
    .u-columns,
    .woocommerce-columns {
        margin-top: -@grid-gutter-vertical-l;
        margin-left: -@grid-gutter-horizontal-l;
    }
    .u-columns > *,
    .woocommerce-columns > * {
        padding-top: @grid-gutter-vertical-l;
        padding-left: @grid-gutter-horizontal-l;
    }
}

/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
    .u-columns > *,
    .woocommerce-columns > * { width: 50%; }
}

/*
 * Notice Wrapper
 */

.woocommerce-notices-wrapper:empty { display: none; }


/*
 * Single Product Page
 ========================================================================== */

/*
 * Layout
 */

div.product {
    position: relative;

    //
    // Scope in `.product >` to apply styling only to original WooCommerce template and not Products element
    //

    > div.images,
    > .summary { margin-bottom: @global-medium-margin; }

    /* Phone landscape and bigger */
    @media (min-width: @breakpoint-small) {

        > div.images {
            margin-bottom: @global-large-margin;
            float: left;
        }

        > .summary {
            margin-bottom: @global-large-margin;
            float: right;
        }

        > .woocommerce-tabs { clear: both; }

        > div.images,
        > .summary { width: ~'calc(50% - (@{grid-large-gutter-horizontal} / 2))'; }

    }

    /* Desktop and bigger */
    @media (min-width: @breakpoint-large) {

        > div.images,
        > .summary { width: ~'calc(50% - (@{grid-large-gutter-horizontal-l} / 2))'; }

    }
}

/*
 * Title
 */

.product_title {
    margin-bottom: @woocommerce-product-page-title-margin-bottom;
    font-size: @woocommerce-product-page-title-font-size;
    line-height: @woocommerce-product-page-title-line-height;
    color: @woocommerce-product-page-title-color;
}

/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {

    .product_title { font-size: @woocommerce-product-page-title-font-size-m; }

}

.product_title when not (@woocommerce-product-page-title-font-family = inherit) {
    font-family: @woocommerce-product-page-title-font-family;
}

.product_title when not (@woocommerce-product-page-title-font-weight = inherit) {
    font-weight: @woocommerce-product-page-title-font-weight;
}

.product_title when not (@woocommerce-product-page-title-text-transform = inherit) {
    text-transform: @woocommerce-product-page-title-text-transform;
}

.product_title when not (@woocommerce-product-page-title-letter-spacing = inherit) {
    letter-spacing: @woocommerce-product-page-title-letter-spacing;
}

.product_title when not (@woocommerce-product-page-title-font-style = inherit) {
    font-style: @woocommerce-product-page-title-font-style;
}

.hook-inverse() {
    .product_title { color: @inverse-base-heading-color; }
}

/*
 * Rating
 */

.woocommerce-product-rating {
    margin-top: @woocommerce-product-page-rating-margin-top;
    margin-bottom: @woocommerce-product-page-rating-margin-bottom;
}

/*
 * Price
 */

// Default template
.summary > .price {
    margin-top: @woocommerce-product-page-price-margin-top;
    margin-bottom: @woocommerce-product-page-price-margin-bottom;
}

// Default template + price element
.summary,
.tm-element-woo-price {

    > .price {
        color: @woocommerce-product-page-price-color;
    }

    > .price when not (@woocommerce-product-page-price-font-size = inherit) {
        font-size: @woocommerce-product-page-price-font-size;
    }

    > .price when not (@woocommerce-product-page-price-line-height = inherit) {
        line-height: @woocommerce-product-page-price-line-height;
    }

    > .price when not (@woocommerce-product-page-price-font-family = inherit) {
        font-family: @woocommerce-product-page-price-font-family;
    }

    > .price when not (@woocommerce-product-page-price-font-weight = inherit) {
        font-weight: @woocommerce-product-page-price-font-weight;
    }

    > .price  when not (@woocommerce-product-page-price-text-transform = inherit) {
        text-transform: @woocommerce-product-page-price-text-transform;
    }

    > .price  when not (@woocommerce-product-page-price-letter-spacing = inherit) {
        letter-spacing: @woocommerce-product-page-price-letter-spacing;
    }

    > .price  when not (@woocommerce-product-page-price-font-style = inherit) {
        font-style: @woocommerce-product-page-price-font-style;
    }

    // From
    .tm-price-from when not (@woocommerce-product-page-price-from-font-size = inherit) {
        font-size: @woocommerce-product-page-price-from-font-size;
    }

    .tm-price-from when not (@woocommerce-product-page-price-from-line-height = inherit) {
        line-height: @woocommerce-product-page-price-from-line-height;
    }

    .tm-price-from when not (@woocommerce-product-page-price-from-font-family = inherit) {
        font-family: @woocommerce-product-page-price-from-font-family;
    }

    .tm-price-from when not (@woocommerce-product-page-price-from-font-weight = inherit) {
        font-weight: @woocommerce-product-page-price-from-font-weight;
    }

    .tm-price-from when not (@woocommerce-product-page-price-from-text-transform = inherit) {
        text-transform: @woocommerce-product-page-price-from-text-transform;
    }

    .tm-price-from when not (@woocommerce-product-page-price-from-letter-spacing = inherit) {
        letter-spacing: @woocommerce-product-page-price-from-letter-spacing;
    }

    .tm-price-from when not (@woocommerce-product-page-price-from-font-style = inherit) {
        font-style: @woocommerce-product-page-price-from-font-style;
    }

    .tm-price-from when not (@woocommerce-product-page-price-from-vertical-align = inherit) {
        vertical-align: @woocommerce-product-page-price-from-vertical-align;
    }

}

// Default template
.summary > .price,
// Price element
.tm-element-woo-price,
// Price source
.tm-source-woo-price {
    del + ins,
    ins + del { margin-left: @woocommerce-product-page-price-sale-margin-horizontal; }
}

/*
 * Description
 */

.woocommerce-product-details__short-description { margin-bottom: @global-margin; }

.woocommerce-product-details__short-description > :last-child { margin-bottom: 0; }

// Hide markup if description is not shown
// Note: Description element doesn't collapse
.summary > .woocommerce-product-details__short-description:empty,
.tm-element-woo-description:empty { display: none !important; }

/*
 * Stock
 */

// Default template
.summary > .stock {}

// Hide stock in Add To Cart element
// Note: Only hide element entirely, if product is not purchasable (empty) or out of stock and no 3rd party plugin has generated markup
.tm-element-woo-add-to-cart:empty,
.tm-element-woo-add-to-cart > .stock,
.tm-element-woo-add-to-cart:has(> .stock:only-child) { display: none !important; }

// Hide markup if stock is not shown
// Note: Stock element doesn't collapse
.summary > .stock:empty,
.tm-element-woo-stock:empty { display: none !important; }

// Show out of stock text as disabled button but not for variable products
.product:not(.product-type-variable) .summary > .out-of-stock,
.product:not(.product-type-variable) .tm-element-woo-stock-disabled > .out-of-stock {
    margin-top: 0;
    // uk-button
    display: inline-block;
    box-sizing: border-box;
    padding: 0 @button-padding-horizontal;
    vertical-align: middle;
    font-size: @button-font-size;
    line-height: @button-line-height;
    text-align: center;
    .hook-button();
    // uk-button-disabled
    background-color: @button-disabled-background;
    color: @button-disabled-color;
    .hook-button-disabled();
}

//// Variable and grouped product
// .woocommerce-variation-availability,
// .woocommerce-grouped-product-list-item__price {
//      > .out-of-stock {
//         // uk-text-danger
//         color: @text-danger-color;
//     }
// }

/*
 * Add to cart
 */

form.cart {
    margin-bottom: @global-margin;

    .quantity:has(input[type="number"]) {
        float: left;
        margin-right: @global-small-margin;
    }

}

.hook-woocommerce-product-page-add-to-cart-large() when (@woocommerce-product-page-add-to-cart-large) {

    .tm-element-woo-add-to-cart {

        .single_add_to_cart_button {
            padding: 0 @button-large-padding-horizontal;
            line-height: @button-large-line-height;
            font-size: @button-large-font-size;
            .hook-button-large();
        }

        .quantity input {
            height: @form-large-height;
            padding-left: @form-large-padding-horizontal;
            padding-right: @form-large-padding-horizontal;
            font-size: @form-large-font-size;
        }

    }

}

.hook-woocommerce-product-page-add-to-cart-large();

.hook-woocommerce-product-page-add-to-cart-expand() when (@woocommerce-product-page-add-to-cart-expand) {

    .tm-element-woo-add-to-cart {

        :has(> .quantity) {
            display: flex;
            .single_add_to_cart_button { flex: 1; }
        }

        form > :not(.quantity) + button, form > button:first-child { width: 100%; }

    }

}

.hook-woocommerce-product-page-add-to-cart-expand();

/*
 * Variable product
 */

// Margins
table.variations { margin-bottom: 0 !important; }

.woocommerce-variation-add-to-cart { margin-top: @global-margin; }

// Hidden
.woocommerce-variation-description,
.woocommerce-variation-price,
.woocommerce-variation-availability { display: none; }

a.reset_variations when not (@woocommerce-product-page-add-to-cart-reset-button) { display: none !important; }

a.reset_variations when (@woocommerce-product-page-add-to-cart-reset-button) {
    display: block;
    margin-top: @global-small-margin;
    text-decoration: none !important;

    // uk-text-small
    font-size: @text-small-font-size;
    line-height: @text-small-line-height;
    .hook-text-small();

    // uk-link-muted
    color: @link-muted-color;
    .hook-link-muted();


    &:hover {
        color: @link-muted-hover-color;
        .hook-link-muted-hover();
    }

    &::before {
        content: '×';
        margin-right: 5px;
    }
}

.hook-inverse() when (@woocommerce-product-page-add-to-cart-reset-button) {

    a.reset_variations {
        color: @inverse-link-muted-color;
        .hook-inverse-link-muted();

        &:hover {
            color: @inverse-link-muted-hover-color;
            .hook-inverse-link-muted-hover();
        }
    }
}

/*
 * Grouped product
 */

// table overflow
form.grouped_form {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*
 * Meta
 */

.product_meta {
    font-size: @text-small-font-size;
    line-height: @text-small-line-height;

    > * { display: block; }
    // > :nth-child(n+2) { margin-top: @list-margin-top; }

    a {
        color: inherit;
        .hook-link-text();
    }

    a:hover {
        color: @link-text-hover-color;
        .hook-link-text-hover();
    }
}

/*
 * Product Gallery
 */

div.images {

    img {
        display: block;
        width: 100%;
    }

    figure { margin: 0; }

    div.thumbnails { padding-top: @global-small-margin; }
}

.woocommerce-product-gallery {
    position: relative;

    .woocommerce-product-gallery__wrapper {
        transition: all cubic-bezier(0.795, -0.035, 0, 1) 0.5s;
    }

    .zoomImg {
        background-color: #fff;
        opacity: 0;
    }

    .woocommerce-product-gallery__image--placeholder {
        border: 1px solid #f2f2f2;
    }

    .woocommerce-product-gallery__image:nth-child(n+2) {
        width: 25%;
        display: inline-block;
    }

    .flex-control-thumbs {
        margin: 0 0 0 -@global-small-margin;
        padding: 0;
        overflow: hidden;

        li {
            box-sizing: border-box;
            padding-left: @global-small-margin;
            padding-top: @global-small-margin;
            float: left;
            margin: 0;
            list-style: none;
            cursor: pointer;

            img {
                opacity: 0.5;

                &.flex-active,
                &:hover {
                    opacity: 1;
                }
            }
        }
    }
}

.woocommerce-product-gallery--columns-2 {
    .flex-control-thumbs li { width: 50%; }
    .flex-control-thumbs li:nth-child(2n+1) { clear: left; }
}

.woocommerce-product-gallery--columns-3 {
    .flex-control-thumbs li { width: ~'calc(100% * 1 / 3.001)'; }
    .flex-control-thumbs li:nth-child(3n+1) { clear: left; }
}

.woocommerce-product-gallery--columns-4 {
    .flex-control-thumbs li { width: 25%; }
    .flex-control-thumbs li:nth-child(4n+1) { clear: left; }
}

.woocommerce-product-gallery--columns-5 {
    .flex-control-thumbs li { width: 20%; }
    .flex-control-thumbs li:nth-child(5n+1) { clear: left; }
}

.woocommerce-product-gallery--columns-6 {
    .flex-control-thumbs li { width: ~'calc(100% * 1 / 6.001)'; }
    .flex-control-thumbs li:nth-child(6n+1) { clear: left; }
}

.woocommerce-product-gallery__trigger {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    font-size: 2em;
    z-index: 9;
    width: 36px;
    height: 36px;
    background: @global-background;
    text-indent: -9999px;
    border-radius: 100%;
    box-sizing: content-box;

    &::before {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        border: 2px solid @global-emphasis-color;
        border-radius: 100%;
        position: absolute;
        top: 9px;
        left: 9px;
        box-sizing: content-box;
    }

    &::after {
        content: "";
        display: block;
        width: 2px;
        height: 8px;
        background: @global-emphasis-color;
        border-radius: 6px;
        position: absolute;
        top: 19px;
        left: 22px;
        transform: rotate(-45deg);
        box-sizing: content-box;
    }
}

.pswp__caption__center { text-align: center; }

/*
 * Tabs
 */

.woocommerce-tabs {
    margin-bottom: @global-large-margin;

    ul.tabs {
        // uk-tab
        display: flex;
        flex-wrap: wrap;
        margin-left: -@tab-margin-horizontal;
        margin-bottom: @global-medium-margin;
        padding: 0;
        list-style: none;
        .hook-tab();

        li {
            // uk-tab
            flex: none;
            padding-left: @tab-margin-horizontal;
            position: relative;

            a {
                // uk-tab
                display: block;
                text-align: center;
                padding: @tab-item-padding-vertical @tab-item-padding-horizontal;
                color: @tab-item-color;
                .hook-tab-item();

                &:hover {
                    // uk-tab
                    color: @tab-item-hover-color;
                    text-decoration: @tab-item-hover-text-decoration;
                    .hook-tab-item-hover();
                }
            }

            &.active {

                a {
                    // uk-tab
                    color: @tab-item-active-color;
                    .hook-tab-item-active();
                }
            }

        }
    }
}

.hook-inverse() {

    .woocommerce-tabs ul.tabs {
        .hook-inverse-tab();

        a {
            color: @inverse-tab-item-color;
            .hook-inverse-tab-item();

            &:hover {
                color: @inverse-tab-item-hover-color;
                .hook-inverse-tab-item-hover();
            }
        }

        &.active {
            a {
                color: @inverse-tab-item-active-color;
                .hook-inverse-tab-item-active();
            }
        }
    }
}

.woocommerce-Tabs-panel > :last-child { margin-bottom: 0; }

.woocommerce-Tabs-panel > h2 {
    font-size: @base-h3-font-size;
    line-height: @base-h3-line-height;
    .hook-base-h3();
}

.hook-inverse() {
    .woocommerce-Tabs-panel > h2 {
        .hook-inverse-base-h3();
    }
}

/*
 * Upsells + Related (Single Product Page)
 * Cross-Sells + Cart Totals (Cart Page)
 */

.upsells { margin-bottom: @global-large-margin; }

.upsells,
.related,
.cross-sells,
.cart_totals {
    h2 {
        font-size: @base-h3-font-size;
        line-height: @base-h3-line-height;
        .hook-base-h3();
    }
}

.hook-inverse() {
    .upsells,
    .related,
    .cross-sells,
    .cart_totals {
        h2 {
            .hook-inverse-base-h3();
        }
    }
}

/*
 * Clear (Checkout Page: Returning customer Notice
 */

.clear { clear: both; }


/*
 * Shop Page
 ========================================================================== */

/*
 * Layout
 */

/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {

    .woocommerce-result-count { float: left; }
    .woocommerce-ordering { float: right; }
    ul.products { clear: both; }

}

.woocommerce-result-count,
.woocommerce-ordering { margin: 0 0 @global-margin; }

// `:not(.uk-panel) >` needed for Filter element to not set the properties
:not(.uk-panel) > .woocommerce-result-count {
    // Center vertically to order select
    line-height: 1em;
    margin-top: ~'calc((@{form-height} - 1em) / 2)' !important;
}

.woocommerce-ordering select { vertical-align: top; }

// Reset in Filter element
.tm-element-woo-filter {

    .woocommerce-result-count,
    .woocommerce-ordering { float: none; }

    .woocommerce-ordering select { width: auto; }

}

/*
 * Products Grid
 */

ul.products {
    // uk-grid
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-bottom: -@grid-gutter-vertical;
    margin-left: -@grid-gutter-horizontal;
}

ul.products > * {
    // uk-grid
    margin: 0;
    padding-bottom: @grid-gutter-vertical;
    padding-left: @grid-gutter-horizontal;
    // uk-width
    box-sizing: border-box;
    width: 100%;
}

ul.products > * > * { position: relative; }

/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
    ul.products {
        margin-bottom: -@grid-gutter-vertical-l;
        margin-left: -@grid-gutter-horizontal-l;
    }
    ul.products > * {
        padding-bottom: @grid-gutter-vertical-l;
        padding-left: @grid-gutter-horizontal-l;
    }
}

/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
    ul.columns-2 > *,
    ul.columns-3 > *,
    ul.columns-4 > *,
    ul.columns-5 > *,
    ul.columns-6 > * { width: 50%; }

}

/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
    ul.columns-3 > *,
    ul.columns-4 > *,
    ul.columns-5 > *,
    ul.columns-6 > * { width: ~'calc(100% * 1 / 3.001)'; }
}

/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
    ul.columns-4 > * { width: 25%; }
    ul.columns-5 > * { width: 20%; }
    ul.columns-6 > * { width: ~'calc(100% * 1 / 6.001)'; }
}

/*
 * Products Panel
 */

ul.products > * {

    &.product-category > a, // Category item
    .woocommerce-loop-product__link {
        display: block;
        text-decoration: none;

        > :last-child { margin-bottom: 0; }
    }

    &.product-category > a > img, // Category item
    .woocommerce-loop-product__link > img {
        width: 100%;
        margin-bottom: @global-margin;
    }

    .woocommerce-loop-product__title,
    .woocommerce-loop-category__title {
        margin: 0 0 @woocommerce-shop-page-title-margin-bottom 0;
        font-size: @woocommerce-shop-page-title-font-size;
        line-height: @woocommerce-shop-page-title-line-height;
        color: @woocommerce-shop-page-title-color;
    }

    .woocommerce-loop-product__title when not (@woocommerce-shop-page-title-font-family = inherit) {
        font-family: @woocommerce-shop-page-title-font-family;
    }

    .woocommerce-loop-product__title when not (@woocommerce-shop-page-title-font-weight = inherit) {
        font-weight: @woocommerce-shop-page-title-font-weight;
    }

    .woocommerce-loop-product__title when not (@woocommerce-shop-page-title-text-transform = inherit) {
        text-transform: @woocommerce-shop-page-title-text-transform;
    }

    .woocommerce-loop-product__title when not (@woocommerce-shop-page-title-letter-spacing = inherit) {
        letter-spacing: @woocommerce-shop-page-title-letter-spacing;
    }

    .woocommerce-loop-product__title when not (@woocommerce-shop-page-title-font-style = inherit) {
        font-style: @woocommerce-shop-page-title-font-style;
    }

    .woocommerce-loop-category__title when not (@woocommerce-shop-page-title-font-family = inherit) {
        font-family: @woocommerce-shop-page-title-font-family;
    }

    .woocommerce-loop-category__title when not (@woocommerce-shop-page-title-font-weight = inherit) {
        font-weight: @woocommerce-shop-page-title-font-weight;
    }

    .woocommerce-loop-category__title when not (@woocommerce-shop-page-title-text-transform = inherit) {
        text-transform: @woocommerce-shop-page-title-text-transform;
    }

    .woocommerce-loop-category__title when not (@woocommerce-shop-page-title-letter-spacing = inherit) {
        letter-spacing: @woocommerce-shop-page-title-letter-spacing;
    }

    .woocommerce-loop-category__title when not (@woocommerce-shop-page-title-font-style = inherit) {
        font-style: @woocommerce-shop-page-title-font-style;
    }

    .star-rating {
        vertical-align: baseline;
        margin-top: @woocommerce-shop-page-rating-margin-top;
        margin-bottom: @woocommerce-shop-page-rating-margin-bottom;
    }

    .price {
        margin-top: @woocommerce-shop-page-price-margin-top;
        font-size: @woocommerce-shop-page-price-font-size;
        line-height: @woocommerce-shop-page-price-line-height;
        // Override Link
        color: @woocommerce-shop-page-price-color;

        del + ins,
        ins + del { margin-left: @woocommerce-shop-page-price-sale-margin-horizontal; }
    }

    .price when not (@woocommerce-shop-page-price-font-family = inherit) {
        font-family: @woocommerce-shop-page-price-font-family;
    }

    .price when not (@woocommerce-shop-page-price-font-weight = inherit) {
        font-weight: @woocommerce-shop-page-price-font-weight;
    }

    .price  when not (@woocommerce-shop-page-price-text-transform = inherit) {
        text-transform: @woocommerce-shop-page-price-text-transform;
    }

    .price  when not (@woocommerce-shop-page-price-letter-spacing = inherit) {
        letter-spacing: @woocommerce-shop-page-price-letter-spacing;
    }

    .price  when not (@woocommerce-shop-page-price-font-style = inherit) {
        font-style: @woocommerce-shop-page-price-font-style;
    }

    > .button,
    > .added_to_cart {
        margin-top: @global-margin;
        // Center loader
        display: inline-flex;
        align-items: center;
    }

    > .button.loading:after {
        content: "";
        width: 1em;
        height: 1em;
        // Position outside
        position: absolute;
        right: 0;
        margin-right: ~'calc(-1em - @{global-small-margin})'; // Width + Margin
        // Style
        color: @global-color;
        border-radius: 50%;
        border: 1px solid;
        border-color: currentColor currentColor currentColor transparent;
        animation: woocommerce-spinner 1s linear infinite;
    }

    > .button.added { display: none; }

    > .added_to_cart {
        // uk-button
        display: inline-block;
        box-sizing: border-box;
        padding: 0 @button-padding-horizontal;
        vertical-align: middle;
        font-size: @button-font-size;
        line-height: @button-line-height;
        text-align: center;
        text-decoration: none;
        .hook-button();
        // uk-button-primary
        background-color: @button-primary-background;
        color: @button-primary-color;
        .hook-button-primary();

        &:hover {
            text-decoration: none;
            .hook-button-hover();
            background-color: @button-primary-hover-background;
            color: @button-primary-hover-color;
            .hook-button-primary-hover();
        }

        &:active {
            background-color: @button-primary-active-background;
            color: @button-primary-active-color;
            .hook-button-primary-active();
        }
    }

    > .added_to_cart::after:extend(.uk-button-primary) when (@internal-button-primary-mode = glow) {}
    > .added_to_cart:hover::after:extend(.uk-button-primary:hover) when (@internal-button-primary-mode = glow) {}
    > .added_to_cart:active::after:extend(.uk-button-primary:active) when (@internal-button-primary-mode = glow) {}

}

.hook-inverse() {
    .woocommerce & ul.products > * {

        .woocommerce-loop-product__title,
        .woocommerce-loop-category__title { color: @inverse-base-heading-color; }

        .price { color: @inverse-global-color; }

        > .button.loading:after { color: @inverse-global-color; }

        > .added_to_cart {
            // uk-button-primary
            background-color: @inverse-button-primary-background;
            color: @inverse-button-primary-color;
            .hook-inverse-button-primary();

            &:hover {
                background-color: @inverse-button-primary-hover-background;
                color: @inverse-button-primary-hover-color;
                .hook-inverse-button-primary-hover();
            }

            &:active {
                background-color: @inverse-button-primary-active-background;
                color: @inverse-button-primary-active-color;
                .hook-inverse-button-primary-active();
            }
        }
    }
}


/*
 * Reviews
 ========================================================================== */

/*
 * Review Title
 */

#reviews {
    .woocommerce-Reviews-title {
        // uk-h3
        font-size: @base-h3-font-size;
        line-height: @base-h3-line-height;
        .hook-base-h3();
    }
}

.hook-inverse() {
    #reviews {
        .woocommerce-Reviews-title {
            .hook-inverse-base-h3();
        }
    }
}

/*
 * Review Title not in tabs
 */

:not(.woocommerce-Tabs-panel) > #reviews {

    .woocommerce-Reviews-title {
        // uk-margin
        margin-bottom: @margin-medium-margin;
        //uk-heading-bullet
        position: relative;

        &::before {
            content: "";
            display: inline-block;
            position: relative;
            top: @heading-bullet-top;
            vertical-align: middle;
            height: @heading-bullet-height;
            margin-right: @heading-bullet-margin-right;
            border-left: @heading-bullet-border-width solid @heading-bullet-border;
            .hook-heading-bullet();
        }
    }
}

.hook-inverse() {
    :not(.woocommerce-Tabs-panel) > #reviews {
        .woocommerce-Reviews-title {
            &::before {
                border-left-color: @inverse-heading-bullet-border;
                .hook-inverse-heading-bullet();
            }
        }
    }
}

/*
 * Comments
 */

#reviews {

    .commentlist {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .commentlist > :nth-child(n+2) {
        margin-top: @comment-list-margin-top;
        .hook-comment-list-adjacent();
    }

    .children {
        margin: @comment-list-margin-top 0 0 0;
        padding-left: @comment-list-padding-left;
        list-style: none;
        .hook-comment-list-sub();

        .star-rating { display: none; }
    }

    @media (min-width: @breakpoint-medium) {
        .children { padding-left: @comment-list-padding-left-m; }
    }

    .children > :nth-child(n+2) {
        margin-top: @comment-list-margin-top;
        .hook-comment-list-sub-adjacent();
    }

    .comment_container {
        .hook-comment();
    }

    .comment-author-admin > .comment_container,
    .bypostauthor > .comment_container {
        .hook-comment-primary();
    }

    .avatar {
        .hook-comment-avatar();
    }

    .woocommerce-review__author {
        // uk-heading
        margin: 0 0 @base-margin-vertical 0;
        font-family: @base-heading-font-family;
        font-weight: @base-heading-font-weight;
        color: @base-heading-color;
        text-transform: @base-heading-text-transform;
        .hook-base-heading();
        // uk-h3
        // font-size: @base-h3-font-size;
        // line-height: @base-h3-line-height;
        .hook-base-h3();
        // uk-comment-title
        font-size: @comment-title-font-size;
        line-height: @comment-title-line-height;
        .hook-comment-title();
        // Override
        margin-bottom: 0;
    }

    .woocommerce-review__verified {
        // Reset
        font-size: @global-small-font-size;
        color: @global-emphasis-color;
    }

    .woocommerce-review__published-date {
        font-size: @comment-meta-font-size;
        line-height: @comment-meta-line-height;
        color: @comment-meta-color;
        .hook-comment-meta();
    }

    //
    // Layout
    //

    .avatar {
        float: left;
        margin-right: @global-gutter;
        margin-bottom: @comment-header-margin-bottom;
    }

    .star-rating { float: right; }

    .meta {
        margin-top: 5px;
        margin-bottom: 0;
    }

    .woocommerce-review__dash { display: none; }
    .woocommerce-review__published-date { display: block; }

    .description {
        clear: both;
        margin-top: @comment-header-margin-bottom;

        > :last-child { margin-bottom: 0; }
    }

    //
    // Respond
    //

    .comment-reply-title {
        display: block;
        // uk-heading
        margin: @base-heading-margin-top 0 @base-margin-vertical 0;
        font-family: @base-heading-font-family;
        font-weight: @base-heading-font-weight;
        color: @base-heading-color;
        text-transform: @base-heading-text-transform;
        .hook-base-heading();
        // uk-h4
        font-size: @base-h4-font-size;
        line-height: @base-h4-line-height;
        .hook-base-h4();
    }

    :not(.comment-form-cookies-consent) > label {
        // uk-form-label
        .hook-form-label();
        // uk-form-stacked
        display: block;
        margin-bottom: @form-stacked-margin-bottom;
        .hook-form-stacked-label();
    }

    p.stars {
        line-height: 1;

        > span { display: inline-flex; }

        a {
            position: relative;
            height: 1em;
            width: 1em;
            text-indent: -999em;
            display: inline-block;
            text-decoration: none;
            // Override
            color: @woocommerce-rating-background-color;

            &::before {
                content: "\e020";
                font-family: WooCommerce;
                position: absolute;
                top: 0;
                left: 0;
                text-indent: 0;
            }

            &:hover {
                color: @woocommerce-rating-color;
                ~ a { color: @woocommerce-rating-background-color; }
            }
        }

        &:hover {
            a { color: @woocommerce-rating-color; }
        }

        &.selected {
            a.active {
                color: @woocommerce-rating-color;
                ~ a { color: @woocommerce-rating-background-color; }
            }

            a:not(.active) { color: @woocommerce-rating-color; }
        }
    }

    .comment-form-cookies-consent > input[type="checkbox"] { margin-right: ~'calc(@{global-small-margin} - 0.25em)'; }

    .form-submit { margin-bottom: 0; }

    .woocommerce-verification-required { margin-top: @global-medium-margin; }
}

.hook-inverse() {

    #reviews {

        .woocommerce-review__author {
            // uk-heading
            color: @inverse-base-heading-color;
            .hook-inverse-base-heading();
            // uk-h3
            .hook-inverse-base-h3();
        }

        .woocommerce-review__published-date {
            color: @inverse-text-meta-color;
            .hook-inverse-text-meta();
        }

        .comment-reply-title {
            // uk-heading
            color: @inverse-base-heading-color;
            .hook-inverse-base-heading();
            // uk-h4
            .hook-inverse-base-h4();
        }

        label {
            .hook-inverse-form-label();
        }

        p.stars {

            a {
                color: @inverse-global-muted-color;

                &:hover {
                    color: @inverse-global-emphasis-color;
                    ~ a { color: @inverse-global-muted-color; }
                }
            }

            &:hover {
                a { color: @inverse-global-emphasis-color; }
            }

            &.selected {
                a.active {
                    color: @inverse-global-emphasis-color;
                    ~ a { color: @inverse-global-muted-color; }
                }

                a:not(.active) { color: @inverse-global-emphasis-color; }
            }
        }

    }
}

/*
 * Table
 */

.woocommerce {

    table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        margin-bottom: @table-margin-vertical;
        .hook-table();
    }

    * + table { margin-top: @table-margin-vertical; }

    th { text-align: left; }

    th:first-child,
    td:first-child { padding-left: 0 !important; }

    th:last-child,
    td:last-child { padding-right: 0 !important; }

    th > :last-child,
    td > :last-child { margin-bottom: 0; }

    /*
     * Single Product Page: Add to cart variations
     */

    table.variations {

        th, td {
            display: block;
            padding: 0;
            vertical-align: middle;
        }

        th.label {
            // Reset `th`
            font-weight: inherit;
            // uk-form-label
            .hook-form-label();
            // uk-form-stacked
            padding-bottom: @form-stacked-margin-bottom;
            .hook-form-stacked-label();
        }

        tr:not(:last-child) .value { padding-bottom: @global-margin; }
    }

    /*
     * Single Product Page: Grouped product
     */

    table.woocommerce-grouped-product-list {

        th, td { padding: @table-small-cell-padding-vertical @table-small-cell-padding-horizontal; }

        .woocommerce-grouped-product-list-item__quantity {
            width: 1px;
            white-space: nowrap;
            vertical-align: top;
        }

        .woocommerce-grouped-product-list-item__price { white-space: nowrap; }

        .woocommerce-grouped-product-list-item__label {

            a {
                color: inherit;
                .hook-link-text();
            }

            a:hover {
                color: @link-text-hover-color;
                .hook-link-text-hover();
            }

        }

        .quantity { margin: 0; }

        .stock {
            margin: 0;
            font-size: @text-small-font-size;
            line-height: @text-small-line-height;
            color: @text-muted-color;
        }

    }

    /*
     * Cart Page: Cart
     * Account Page: Orders
     */

    table.shop_table {

        thead th {
            padding: @table-cell-padding-vertical @table-cell-padding-horizontal;
            vertical-align: bottom;
            font-size: @table-header-cell-font-size;
            font-weight: @table-header-cell-font-weight;
            color: @table-header-cell-color;
            .hook-table-header-cell();
        }

        :not(thead) > th {font-weight: normal; }

        :not(thead) > th, td {
            padding: @table-cell-padding-vertical @table-cell-padding-horizontal;
            vertical-align: middle;
            .hook-table-cell();
        }

        th:last-child,
        td:last-child { text-align: right; }

        > tr:not(:first-child),
        > :not(:first-child) > tr,
        > :first-child > tr:not(:first-child) {
            border-top: @table-divider-border-width solid @table-divider-border;
            .hook-table-divider();
        }

        td.product-thumbnail {
            width: 75px;
            min-width: 75px; // Keep image width on small devices
        }

        td.product-name,
        td.download-product {

            a {
                color: @woocommerce-widget-link-color;
                text-decoration: none !important;
            }

            a:hover {
                color: @woocommerce-widget-link-hover-color;
            }

            strong { font-weight: normal; }
        }

        // For refunds (`del/ins`)
        del { display: none; }
        ins {
            // Reset
            background: transparent;
            color: inherit;
        }
    }

    /*
     * Cart Page: Cart
     */

    table.cart {
        margin-bottom: 0;
        position: relative;

        // Place Product header text to the left
        thead th.product-name {
            position: absolute;
            left: 0;
            padding-left: 0;
        }

        // Make product column auto width
        td { width: 1px; }
        td.product-name { width: auto; }

        // Coupon
        tbody td[colspan="6"] { text-align: left; }

        // 3rd-Party Plugin: Subscriptions
        td.product-price,
        td.product-subtotal { white-space: nowrap; }
    }

    /* Phone landscape and smaller */
    @media (max-width: @breakpoint-small-max) {

        table.cart thead { display: none; }

        th, td {
            padding-left: 5px !important;
            padding-right: 5px !important;
        }

        th:first-child,
        td:first-child { padding-right: 0 !important; }

        input.input-text.qty { width: 3em; }
    }

    /*
     * Cart Page: Total
     */

    .cart_totals > table {

        .woocommerce-shipping-totals th { vertical-align: top; }

        .woocommerce-shipping-totals td {
            width: 60%;
            text-align: left;
        }

        .order-total strong { font-weight: normal; }
    }

    /*
     * Checkout
     */

    table.woocommerce-checkout-review-order-table {
        margin-bottom: 0;

        td, th { vertical-align: top !important; }

        // td:last-child { white-space: nowrap; }

        .order-total strong { font-weight: normal; }

        .order-total .includes_tax { display: block; }
    }

    /*
     * Order Page
     */

    table.woocommerce-table--order-details {

        td, th { vertical-align: top !important; }

        .shipped_via { display: block; }
    }

    /*
     * Account Page: Orders, Downloads, Order Details, 3rd-Party Plugin: Subscriptions
     */

    table.my_account_orders,
    table.woocommerce-table--order-downloads,
    table.order_details,
    table.subscription_details {

        .button {
            padding: 0 @button-small-padding-horizontal;
            line-height: @button-small-line-height;
            font-size: @button-small-font-size;
            .hook-button-small();
        }

    }

    // Stack multiple buttons
    table.my_account_orders {

        td:last-child { width: 1px; }

        td:last-child .button {
            display: block;
            width: 100%;
            white-space: nowrap;
        }

        td:last-child * + .button { margin-top: 5px; }

    }

    // 3rd-Party Plugin: Subscriptions (Switch subscription button)
    table.order_details .wcs-switch-link { margin-left: 20px; }

}

/*
 * Single Product Page: Additional Information
 * Not scoped in `woocommerce` class to make style working when mapping additional information field
 */

table.shop_attributes {

    // Default
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    margin-bottom: @table-margin-vertical;
    .hook-table();

    & + table { margin-top: @table-margin-vertical; }

    th { text-align: left; }

    th:first-child,
    td:first-child { padding-left: 0 !important; }

    th:last-child,
    td:last-child { padding-right: 0 !important; }

    th > :last-child,
    td > :last-child { margin-bottom: 0; }

    // Style
    th, td { padding: @table-small-cell-padding-vertical @table-small-cell-padding-horizontal; }

    tr:not(:first-child) {
        border-top: @table-divider-border-width solid @table-divider-border;
        .hook-table-divider();
    }

    th {
        width: 1px;
        white-space: nowrap;
        font-weight: normal;
        color: @text-emphasis-color;
    }

    td.woocommerce-product-attributes-item__value {

        a {
            color: inherit;
            .hook-link-text();
        }

        a:hover {
            color: @link-text-hover-color;
            .hook-link-text-hover();
        }
    }
}

.hook-inverse() {

    .woocommerce {

        & table.woocommerce-grouped-product-list {

            .woocommerce-grouped-product-list-item__label {

                a:hover {
                    color: @inverse-link-text-hover-color;
                    .hook-inverse-link-text-hover();
                }
            }
        }

        & table.shop_table {

            thead th {
                color: @inverse-table-header-cell-color;
                .hook-inverse-table-header-cell();
            }

            > tr:not(:first-child),
            > :not(:first-child) > tr,
            > :first-child > tr:not(:first-child) {
                border-top-color: @table-divider-border;
                .hook-inverse-table-divider();
            }

            td.product-name,
            td.download-product {

                a { color: @inverse-global-emphasis-color; }
                a:hover { color: @inverse-global-color; }
            }
        }
    }

    // Not scoped
    table.shop_attributes {

        tr:not(:first-child) {
            border-top-color: @table-divider-border;
            .hook-inverse-table-divider();
        }

        table.shop_attributes th { color: @inverse-global-emphasis-color; }

        td.woocommerce-product-attributes-item__value {

            a:hover {
                color: @inverse-link-text-hover-color;
                .hook-inverse-link-text-hover();
            }
        }
    }
}

/*
 * Product Variations (Cart + Checkout Pages)
 */

dl.variation {
    display: flow-root;
    margin: 0;

    dt {
        display: inline-block;
        margin-right: 0.25em;
        float: left;
        clear: both;
        font-weight: normal;
    }

    dt, dd {
        font-size: @text-small-font-size;
        line-height: @text-small-line-height;
        // color: @text-muted-color;
    }

    dd p { margin-bottom: 0; }
}

/*
 * Product Variations (Order and My Account Order Details Page)
 */

.wc-item-meta {
    display: flow-root;
    margin: 0;
    padding: 0;
    list-style: none;

    li {
        font-size: @text-small-font-size;
        line-height: @text-small-line-height;
    }

    strong {
        margin-right: 0.25em;
        font-weight: normal;
    }

    p {
        display: inline-block;
        margin: 0;
    }
}

.hook-inverse() {

    .wc-item-meta strong { color: @inverse-text-emphasis-color; }

}

/* Hide meta text if it's just one variation */
.wc-item-meta:has(> li:only-child) { display: none; }


/*
 * Cart Page
 ========================================================================== */

/*
 * Overlay when updating the car
 */

.woocommerce {

    .blockUI.blockOverlay {
        background-color: @global-background !important;
        position: relative;
        .loader();
    }

}

/*
 * Layout
 */

.hook-woocommerce-cart-page-layout() when (@woocommerce-cart-page-layout = columns) {

    .woocommerce-cart .woocommerce {
        display: flex;
        flex-wrap: wrap;
        row-gap: @global-medium-margin;
    }

    /* Reset if cart is empty */
    .woocommerce-cart .woocommerce:has(> p.return-to-shop) { display: block; }

    /* Tablet landscape and bigger */
    @media (min-width: @breakpoint-medium) {

        .woocommerce-cart .woocommerce { column-gap: @grid-large-gutter-horizontal; }

    }

    /* Desktop and bigger */
    @media (min-width: @breakpoint-large) {

        .woocommerce-cart .woocommerce { column-gap: @grid-large-gutter-horizontal-l; }

    }

    .cart-collaterals { display: contents; }

    .woocommerce-notices-wrapper { width: 100%; }

    .woocommerce-cart-form,
    .cart_totals { width: 100%; }

    // /* Phone landscape and bigger */
    // @media (min-width: @breakpoint-small) {

    //     .woocommerce-cart-form,
    //     .cart_totals { width: ~'calc(50% - (@{grid-large-gutter-horizontal} / 2))'; }

    // }

    /* Desktop and bigger */
    @media (min-width: @breakpoint-large) {

        .woocommerce-cart-form { width: ~'calc((100% - @{woocommerce-cart-page-order-column-width-l}) - (@{grid-large-gutter-horizontal-l} / 2))'; }
        .cart_totals { width: ~'calc((@{woocommerce-cart-page-order-column-width-l}) - (@{grid-large-gutter-horizontal-l} / 2))'; }

    }

    .cross-sells {
        order: 99;
        width: 100%;
    }

}

.hook-woocommerce-cart-page-layout() when (@woocommerce-cart-page-layout = classic) {

    .cart-collaterals {
        display: flow-root;
        margin-top: @global-medium-margin;
    }

    /* Tablet landscape and bigger */
    @media (min-width: @breakpoint-medium) {

        .cross-sells { float: left; }
        .cart_totals { float: right; }

        .cross-sells,
        .cart_totals { width: ~'calc(50% - (@{grid-large-gutter-horizontal} / 2))'; }

    }

    /* Desktop and bigger */
    @media (min-width: @breakpoint-large) {

        .cross-sells,
        .cart_totals { width: ~'calc(50% - (@{grid-large-gutter-horizontal-l} / 2))'; }

    }

}

.hook-woocommerce-cart-page-layout();

/*
 * Table
 */

form.woocommerce-cart-form {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*
 * Form Layout
 */

.form-row { margin: 0; }

.form-row:not(:last-child) { margin-bottom: @global-margin; }

// 3rd-party Plugin: Subscriptions (Change Billing Address)
.woocommerce-address-fields__field-wrapper + .form-row { margin-top: @global-margin; }

/* Checkout: First/Last Name (+ Coupon), Account Details: First/Last Name, Reset Password */
.form-row-first { float: left; }
.form-row-last { float: right; }
.form-row-wide { clear: both; }

.form-row-first,
.form-row-last { width: 100%; }

/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {

    .form-row-first,
    .form-row-last { width: ~'calc(50% - (@{grid-gutter-horizontal} / 2))'; }

}

/* Desktop and bigger */
@media (min-width: @breakpoint-large) {

    .form-row-first,
    .form-row-last { width: ~'calc(50% - (@{grid-gutter-horizontal-l} / 2))'; }

}

.form-row {

    label:first-child:not(.checkbox, .woocommerce-form__label-for-checkbox) {
        // uk-form-label
        .hook-form-label();
        // uk-form-stacked
        display: block;
        margin-bottom: @form-stacked-margin-bottom;
        .hook-form-stacked-label();
    }

    .required {
        color: @text-danger-color;
        text-decoration: none;
    }

    .optional { visibility: hidden; }
}

.hook-inverse() {
    .form-row label:first-child:not(.checkbox) {
        .hook-inverse-form-label();
    }
}

/*
 * Coupon
 */

.coupon label { display: none; }
.coupon input.input-text {
    margin-right: @global-small-margin;
    width: @form-width-medium;
}

/* Phone portrait and smaller */
@media (max-width: @breakpoint-xsmall-max) {

    .coupon { margin-bottom: @global-margin; }

}

/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {

    .coupon { float: left; }
    .coupon + button { float: right; }

}

/*
 * Layout Cart Collaterals
 */

/* Phone portrait and smaller */
@media (max-width: @breakpoint-small-max) {

    .cart-collaterals > :not(:first-child) { margin-top: @global-medium-margin; }

}

/*
 * Card Totals: Shipping Methods
 */

.woocommerce-shipping-methods {
    padding: 0;
    list-style: none;
    text-align: left; // Reset inheritance from table

    li {
        display: flex;
        align-items: center;
    }

    input[type="radio"] { margin-top: 0; }

    input[type="radio"] + label {
        margin-left: @global-small-margin;
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    input[type="radio"] + label > span { margin-left: 4px; }
}

.shipping-calculator-form { margin-top: @global-small-margin; }

.shipping-calculator-form button { width: 100%; }

/*
 * Card Totals: Button Checkout
 */

.wc-proceed-to-checkout {

    a.checkout-button {
        width: 100%;
        padding: 0 @button-large-padding-horizontal;
        line-height: @button-large-line-height;
        font-size: @button-large-font-size;
        .hook-button-large();
    }
}


/*
 * Checkout Page
 ========================================================================== */

/*
 * Coupon
 */

.woocommerce {

    form.checkout_coupon {
        display: flow-root;
        margin-bottom: @global-medium-margin;

        .form-row { margin-bottom: 0; }
    }

    /* Phone portrait and smaller */
    @media (max-width: @breakpoint-xsmall-max) {

        form.checkout_coupon {

            .form-row-first { margin-bottom: @global-margin; }

        }

    }

    /* Phone landscape and bigger */
    @media (min-width: @breakpoint-small) {

        form.checkout_coupon {

            .form-row {
                width: auto;
                margin-bottom: 0;
            }

            .form-row-first { padding-right: ~'calc(@{global-small-margin} + 0.25em)'; }
            .form-row-last { float: left; }
        }

    }

}

/*
 * Layout
 */

.woocommerce-notices-wrapper:not(:empty) ~ .woocommerce-checkout,
.woocommerce-notices-wrapper:empty ~ * ~ .woocommerce-checkout { margin-top: @global-medium-margin; }

/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {

    .woocommerce-checkout { display: flow-root; }

    #customer_details {
        float: left;
        width: ~'calc(50% - (@{grid-large-gutter-horizontal} / 2))';
    }

    #order_review_heading,
    .woocommerce-checkout-review-order {
        float: right;
        width: ~'calc(50% - (@{grid-large-gutter-horizontal} / 2))';
    }

    #order_review_heading { margin-top: 0; }

}

/* Desktop and bigger */
@media (min-width: @breakpoint-large) {

    #customer_details { width: ~'calc((100% - @{woocommerce-checkout-page-order-column-width-l}) - (@{grid-large-gutter-horizontal-l} / 2))'; }

    #order_review_heading,
    .woocommerce-checkout-review-order { width: ~'calc((@{woocommerce-checkout-page-order-column-width-l}) - (@{grid-large-gutter-horizontal-l} / 2))'; }

}

/*
 * Shipping + Account Fields
 */

#customer_details > .col-2,
.woocommerce-account-fields { margin-top: @global-margin; }

#ship-to-different-address {
    // Reset h3 heading
    text-transform: inherit;
    text-shadow: inherit;
    letter-spacing: inherit;
    font-family: @base-body-font-family;
    font-size: @base-body-font-size;
    font-weight: @base-body-font-weight;
    line-height: @base-body-line-height;
    color: @base-body-color;

    > label > input[type="checkbox"] { margin-right: ~'calc(@{global-small-margin} - 0.25em)'; }
}

.hook-inverse() {
    #ship-to-different-address {
        color: @inverse-base-color;
    }
}

/*
 * Payment
 */

.wc_payment_methods {
    padding: 0;
    list-style: none;

    > * {
        margin-top: @table-cell-padding-vertical;
        padding-top: @table-cell-padding-vertical;
        border-top: @table-divider-border-width solid @table-divider-border;
    }

    > :first-child { margin-top: 0; }

    > * > input[type="radio"] { margin-right: ~'calc(@{global-small-margin} - 0.25em)'; }

    .payment_box {
        margin-top: @global-small-margin;
        padding-left: ~'calc(@{form-radio-size} + @{global-small-margin})'; // without: (- 0.25em + 0.25em)
        font-size: @text-small-font-size;
        line-height: @text-small-line-height;

        p:only-child { margin-bottom: 0; }
    }
}

.woocommerce-SavedPaymentMethods {
    padding: 0;
    list-style: none;
}

/*
 * Credit Card Form
 */

.wc-credit-card-form-card-number {
    background-repeat: no-repeat !important;
    background-position: right .618em center !important;
    background-size: 32px 20px !important;

    &.visa { background-image: url('@{internal-woocommerce-path}/assets/images/icons/credit-cards/visa.png') !important; }
    &.mastercard { background-image: url('@{internal-woocommerce-path}/assets/images/icons/credit-cards/mastercard.png') !important; }
    &.laser { background-image: url('@{internal-woocommerce-path}/assets/images/icons/credit-cards/laser.png') !important; }
    &.dinersclub { background-image: url('@{internal-woocommerce-path}/assets/images/icons/credit-cards/diners.png') !important; }
    &.maestro { background-image: url('@{internal-woocommerce-path}/assets/images/icons/credit-cards/maestro.png') !important; }
    &.jcb { background-image: url('@{internal-woocommerce-path}/assets/images/icons/credit-cards/jcb.png') !important; }
    &.amex { background-image: url('@{internal-woocommerce-path}/assets/images/icons/credit-cards/amex.png') !important; }
    &.discover { background-image: url('@{internal-woocommerce-path}/assets/images/icons/credit-cards/discover.png') !important; }

}

.wc-credit-card-form-card-cvc { width: 100% !important; }

.payment_method_paypal .about_paypal { display: none; }

/*
 * Terms
 */

.woocommerce-terms-and-conditions-wrapper {
    font-size: @text-small-font-size;
    line-height: @text-small-line-height;

    > * + * { margin-top: @global-margin; }
}

// Note, text is also shown on register page
.woocommerce-terms-and-conditions-wrapper > .woocommerce-privacy-policy-text > :last-child { margin-bottom: 0; }

.woocommerce-terms-and-conditions {
    // uk-alert
    margin-bottom: @alert-margin-vertical;
    padding: @alert-padding @alert-padding-right @alert-padding @alert-padding;
    background: @alert-background;
    color: @alert-color;
    .hook-alert();

    > :last-child { margin-bottom: 0; }
}

/*
 * Button Place Order
 */

.woocommerce-checkout-review-order button {
    width: 100%;
    margin-top: @global-margin;
    padding: 0 @button-large-padding-horizontal;
    line-height: @button-large-line-height;
    font-size: @button-large-font-size;
    .hook-button-large();
}


/*
 * Order Page (After Checkout)
 ========================================================================== */

/*
 * Layout
 */

.hook-woocommerce-order-page-layout() when (@woocommerce-order-page-layout = columns) {

    /* Phone portrait and smaller */
    @media (max-width: @breakpoint-xsmall-max) {

        .woocommerce-order > section { margin-top: @global-medium-margin; }

        // 3rd-Party Plugin: Subscriptions (+ Addresses Page)
        .woocommerce-order header { margin-top: @global-medium-margin; }

    }

    /* Phone landscape and bigger */
    @media (min-width: @breakpoint-small) {

        .woocommerce-order {
            display: grid;
            grid-template-columns: auto ~'calc(50% - (@{grid-large-gutter-horizontal} / 2))';
            grid-template-rows: auto auto auto 1fr;
            align-items: start;
            column-gap: @grid-large-gutter-horizontal;
        }

        .woocommerce-order-details {
            grid-column: 2;
            grid-row: 1 / 5;
        }

        .woocommerce-customer-details {
            grid-column: 1;
            grid-row: 4;
        }

        .woocommerce-order > section:not(.woocommerce-order-details) { margin-top: @global-medium-margin; }

        .woocommerce-order-overview,
        .wc-bacs-bank-details { margin: 0; }

    }

    /* Desktop and bigger */
    @media (min-width: @breakpoint-large) {

        .woocommerce-order {
            grid-template-columns: auto ~'calc((@{woocommerce-order-page-order-column-width-l}) - (@{grid-large-gutter-horizontal-l} / 2))';
            column-gap: @grid-large-gutter-horizontal-l;
        }

    }


}

.hook-woocommerce-order-page-layout() when (@woocommerce-order-page-layout = classic) {

    .woocommerce-order > section { margin-top: @global-medium-margin; }

    // 3rd-Party Plugin: Subscriptions (+ Addresses Page)
    .woocommerce-order header { margin-top: @global-medium-margin; }

}

.hook-woocommerce-order-page-layout();

/*
 * Order Overview
 */

.woocommerce-order-overview {
    padding: @padding-padding;
    border: 2px dashed @global-border;
    list-style: none;
}

/* Desktop and bigger */
@media (min-width: @breakpoint-large) {

    .woocommerce-order-overview { padding: @padding-padding-l; }

}

/*
 * Bank Details
 */

.wc-bacs-bank-details-account-name {
    margin-top: 0;
    // uk-h4
    font-size: @base-h4-font-size;
    line-height: @base-h4-line-height;
    .hook-base-h4();
}

.hook-inverse() {
    .wc-bacs-bank-details-account-name {
        .hook-inverse-base-h4();
    }
}

.wc-bacs-bank-details {
    padding: 0;
    list-style: none;
}

.hook-inverse() {
    .woocommerce-order-overview {
        border-color: @inverse-global-border;
    }
    .wc-bacs-bank-details-account-name {
        .hook-inverse-base-h4();
    }
}


/*
 * Order Tracking Page
 ========================================================================== */

ol.commentlist.notes {
    list-style: none;
    padding: 0;
    margin-bottom: @global-medium-margin;

    > :nth-child(n+2) { margin-top: @global-margin; }

    .meta {
        margin-bottom: 0;
        // uk-text-meta
        font-size: @text-meta-font-size;
        line-height: @text-meta-line-height;
        color: @text-meta-color;
        .hook-text-meta();
    }

    .description > :last-child { margin-bottom: 0; }
}

.hook-inverse() {

    ol.commentlist.notes {
        .meta {
            color: @inverse-text-meta-color;
            .hook-inverse-text-meta();
        }
    }
}


/*
 * Login + Register Pages
 ========================================================================== */

.woocommerce {

    form.login,
    form.register {
        > :last-child { margin-bottom: 0; }
    }

    form.login {

        .woocommerce-form-login__rememberme { display: block; }
        .woocommerce-form-login__submit { margin-top: @global-margin; }
        .woocommerce-form-login__submit:extend(.uk-button-primary all) {}

    }

    form.register {

        .woocommerce-form-register__submit:extend(.uk-button-primary all) {}

    }

    form.lost_reset_password {

        .form-row-first,
        .form-row-last { width: 100%; }

        button.button:extend(.uk-button-primary all) {}
    }

}


/*
 * Cart + Product Widgets
 ========================================================================== */

/*
 * Cart + Product List (Lists with left aligned image)
 */

ul.cart_list,
ul.product_list_widget {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
        position: relative;
        display: flow-root;
        min-height: 60px; // Image Width
        padding-left: ~'calc(60px + @{global-small-margin})'; // Image Width + Margin Right
        // Using `li` element because of long dash between pricing variations in product_list_widget
        font-size: @woocommerce-widget-font-size;
        line-height: @woocommerce-widget-line-height;

        &:not(:first-child) { margin-top: 5px; }

        a:not(.remove) {
            display: block;
            // Needed because `li` element is styled differently
            font-size: @global-font-size;
            line-height: @global-line-height;
            // Style
            color: @woocommerce-widget-link-color;
            text-decoration: none !important;
        }

        a:not(.remove):hover { color: @woocommerce-widget-link-hover-color; }

        img {
            position: absolute;
            top: 0;
            left: 0;
            float: left;
            width: 60px;
        }

        dl.variation { margin: 0; }

        .quantity {
            display: block;
            color: @global-emphasis-color;
        }

        .star-rating ~ * { vertical-align: middle; }

    }
}

.hook-inverse() {

    ul.cart_list,
    ul.product_list_widget {

        a:not(.remove) { color: @inverse-global-emphasis-color; }
        a:not(.remove):hover { color: @inverse-global-color; }

        .quantity { color: @inverse-global-emphasis-color; }

    }
}

.widget_shopping_cart {

    .total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: @global-small-gutter;
        padding-top: @global-small-gutter;
        border-top: @global-border-width solid @global-border;
    }

    .cart_list li {
        position: relative;
        padding-right: 20px;

        a.remove {
            position: absolute;
            top: 0;
            right: 0;
        }
    }

    .buttons {
        margin-bottom: 0;

        a { display: block; }
        a + a { margin-top: @global-small-margin; }
    }
}

.woocommerce-mini-cart__empty-message { margin-bottom: 0; }

.woocommerce-mini-cart__total strong { font-weight: normal; }


/*
 * Account Page
 ========================================================================== */

/*
 * Layout
 */

/* Phone portrait and smaller */
@media (max-width: @breakpoint-xsmall-max) {

    .woocommerce-MyAccount-navigation { margin-bottom: @global-medium-margin; }

}

/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {

    .woocommerce-MyAccount-navigation {
        float: left;
        width: ~'calc(25% - (@{grid-large-gutter-horizontal} * 0.75))';
    }

    .woocommerce-MyAccount-content {
        float: right;
        width: ~'calc(75% - (@{grid-large-gutter-horizontal} * 0.25))';
    }

}

/* Desktop and bigger */
@media (min-width: @breakpoint-large) {

    .woocommerce-MyAccount-navigation { width: ~'calc(25% - (@{grid-large-gutter-horizontal-l} * 0.75))'; }
    .woocommerce-MyAccount-content { width: ~'calc(75% - (@{grid-large-gutter-horizontal-l} * 0.25))'; }

}

/* Divider */
.hook-woocommerce-myaccount-page-grid-divider() when (@woocommerce-myaccount-page-grid-divider) {

    /* Phone portrait and smaller */
    @media (max-width: @breakpoint-xsmall-max) {

        .woocommerce-MyAccount-navigation {
            padding-bottom: @global-margin;
            border-bottom: @grid-divider-border-width solid @grid-divider-border;
        }

    }
}

.hook-woocommerce-myaccount-page-grid-divider() when (@woocommerce-myaccount-page-grid-divider) {
    .woocommerce-MyAccount-content { position: relative; }

    /* Phone landscape and bigger */
    @media (min-width: @breakpoint-small) {

        // Make divider as large as the highest column
        .woocommerce:has(> .woocommerce-MyAccount-navigation) {
            display: flex;
            justify-content: space-between;
        }

        .woocommerce-MyAccount-navigation { width: ~'calc(25% - (@{grid-large-gutter-horizontal} * 1.5))'; }
        .woocommerce-MyAccount-content { width: ~'calc(75% - (@{grid-large-gutter-horizontal} * 0.5))'; }

        .woocommerce-MyAccount-content::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: -@grid-large-gutter-horizontal;
            border-left: @grid-divider-border-width solid @grid-divider-border;
        }

    }

    /* Desktop and bigger */
    @media (min-width: @breakpoint-large) {

        .woocommerce-MyAccount-navigation { width: ~'calc(25% - (@{grid-large-gutter-horizontal-l} * 1.5))'; }
        .woocommerce-MyAccount-content { width: ~'calc(75% - (@{grid-large-gutter-horizontal-l} * 0.5))'; }

        .woocommerce-MyAccount-content::before { left: -@grid-large-gutter-horizontal-l; }

    }

}

.hook-woocommerce-myaccount-page-grid-divider();

/*
 * Nav
 */

/* Phone portrait and smaller */
@media (max-width: @breakpoint-xsmall-max) {

    .woocommerce-MyAccount-navigation {

        ul {
            // uk-subnav
            display: flex;
            flex-wrap: wrap;
            margin-left: -@subnav-margin-horizontal;
            padding: 0;
            list-style: none;
            .hook-subnav();
            // Reset
            margin-bottom: 0;
        }

        ul > li {
            // uk-subnav
            flex: none;
            padding-left: @subnav-margin-horizontal;
            position: relative;
        }

        ul > * > :first-child {
            // uk-subnav
            display: block;
            color: @subnav-item-color;
            .hook-subnav-item();
        }

        /* Hover + Focus */
        ul > * > a:hover {
            // uk-subnav
            color: @subnav-item-hover-color;
            text-decoration: @subnav-item-hover-text-decoration;
            .hook-subnav-item-hover();
        }

        /* Active */
        ul > .is-active > a {
            // uk-subnav
            color: @subnav-item-active-color;
            .hook-subnav-item-active();
        }
    }
}

.hook-inverse() {

    /* Phone portrait and smaller */
    @media (max-width: @breakpoint-xsmall-max) {

        .woocommerce-MyAccount-navigation {

            ul > * > :first-child {
                color: @inverse-subnav-item-color;
                .hook-inverse-subnav-item();
            }

            ul > * > a:hover {
                color: @inverse-subnav-item-hover-color;
                .hook-inverse-subnav-item-hover();
            }

            ul > .is-active > a {
                color: @inverse-subnav-item-active-color;
                .hook-inverse-subnav-item-active();
            }
        }
    }
}

/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {

    .woocommerce-MyAccount-navigation {

        ul {
            // uk-nav
            padding: 0;
            list-style: none;
            // Reset
            margin: 0;
        }

        li > a {
            // uk-nav
            display: block;
            text-decoration: none;
        }

        //
        //  Level 1
        //

        > ul {
            .hook-nav-default();
        }

        > ul > li > a {
            // uk-nav
            padding: @nav-item-padding-vertical @nav-item-padding-horizontal;
            // uk-nav-default
            color: @nav-default-item-color;
            .hook-nav-default-item();
        }

        /* Hover + Focus */
        > ul > li > a:hover {
            // uk-nav-default
            color: @nav-default-item-hover-color;
            .hook-nav-default-item-hover();
        }

        /* Active */
        > ul > li.is-active > a {
            // uk-nav-default
            color: @nav-default-item-active-color;
            .hook-nav-default-item-active();
        }
    }
}

.hook-inverse() {

    /* Phone landscape and bigger */
    @media (min-width: @breakpoint-small) {

        .woocommerce-MyAccount-navigation {

            > ul > li > a {
                color: @inverse-nav-default-item-color;
                .hook-inverse-nav-default-item();
            }

            > ul > li > a:hover {
                color: @inverse-nav-default-item-hover-color;
                .hook-inverse-nav-default-item-hover();
            }

            > ul > li.is-active > a {
                color: @inverse-nav-default-item-active-color;
                .hook-inverse-nav-default-item-active();
            }
        }
    }
}

/*
 * Content
 */

.woocommerce-notices-wrapper:empty + :not(.u-columns, .woocommerce-columns, .woocommerce-checkout) { margin-top: 0; }

/*
 * Orders
 */

.woocommerce-MyAccount-content > section { margin-top: @global-medium-margin; }

// 3rd-Party Plugin: Subscriptions (+ Addresses Page)
.woocommerce-MyAccount-content header:not(:first-child) { margin-top: @global-medium-margin; }

/*
 * Addresses
 */

.woocommerce-Address-title {

    margin-top: ~'calc(@{global-medium-margin} - @{global-margin})';

}

.woocommerce-Address {

    a {
        // uk-button
        display: inline-block;
        box-sizing: border-box;
        padding: 0 @button-padding-horizontal;
        vertical-align: middle;
        font-size: @button-font-size;
        line-height: @button-line-height;
        text-align: center;
        text-decoration: none;
        .hook-button();
        // uk-button-primary
        background-color: @button-primary-background;
        color: @button-primary-color;
        .hook-button-primary();
    }

    a:hover {
        text-decoration: none;
        .hook-button-hover();
        background-color: @button-primary-hover-background;
        color: @button-primary-hover-color;
        .hook-button-primary-hover();
    }

    a:active {
        background-color: @button-primary-active-background;
        color: @button-primary-active-color;
        .hook-button-primary-active();
    }

    a::after:extend(.uk-button-primary) when (@internal-button-primary-mode = glow) {}
    a:hover::after:extend(.uk-button-primary:hover) when (@internal-button-primary-mode = glow) {}
    a:active::after:extend(.uk-button-primary:active) when (@internal-button-primary-mode = glow) {}
}

.hook-inverse() {

    .woocommerce-Address {

        a {
            background-color: @inverse-button-primary-background;
            color: @inverse-button-primary-color;
            .hook-inverse-button-primary();
        }

        a:hover {
            background-color: @inverse-button-primary-hover-background;
            color: @inverse-button-primary-hover-color;
            .hook-inverse-button-primary-hover();
        }

        a:active {
            background-color: @inverse-button-primary-active-background;
            color: @inverse-button-primary-active-color;
            .hook-inverse-button-primary-active();
        }
    }
}

// Save Button
.woocommerce-address-fields > p:last-child { margin-top: @global-medium-margin; }

/*
 * Account Details
 */

// Save Button
.woocommerce-EditAccountForm > p:last-child { margin-top: @global-medium-margin; }

.woocommerce-MyAccount-content .form-row {

    .input-text + span:not(.show-password-input) {
        display: block;
        margin-top: @global-small-margin;
    }

     em {
        font-style: normal;
        // uk-text-muted
         color: @text-muted-color !important;
        // uk-text-small
        font-size: @text-small-font-size;
        line-height: @text-small-line-height;
        .hook-text-small();
     }
}

.woocommerce-MyAccount-content fieldset { margin-top: @base-heading-margin-top; }

.woocommerce-MyAccount-content legend {
    // uk-form-legend
    width: 100%;
    // color: inherit;
    padding: 0;
    // uk-heading
    margin: 0 0 @base-margin-vertical 0;
    font-family: @base-heading-font-family;
    font-weight: @base-heading-font-weight;
    color: @base-heading-color;
    text-transform: @base-heading-text-transform;
    .hook-base-heading();
    // uk-h3
    font-size: @base-h3-font-size;
    line-height: @base-h3-line-height;
    .hook-base-h3();
}

.hook-inverse() {

    .woocommerce-MyAccount-content .form-row {
         em { color: @inverse-text-muted-color !important; }
    }

    .woocommerce-MyAccount-content legend {
        // uk-heading
        color: @inverse-base-heading-color;
        .hook-inverse-base-heading();
        // uk-h3
        .hook-inverse-base-h3();
    }
}

/*
 * Password Strength Meter
 */

.woocommerce-password-strength {
    margin-top: @global-small-margin;

    &.strong { color: @text-success-color; }
    &.short, &.bad { color: @text-danger-color; }
    &.good { color: @text-warning-color; }
}

.woocommerce-password-hint {
    // uk-text-meta
    font-size: @text-meta-font-size;
    line-height: @text-meta-line-height;
    color: @text-meta-color;
    .hook-text-meta();
}

/*
 * Show Password Input
 */

.password-input {
    display: block;
    position: relative;

    input {
        padding-right: @form-icon-width !important;
    }
}

.show-password-input {
    cursor: pointer;
    // uk-form-icon
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: @form-icon-width;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: @form-icon-color;
}

.show-password-input:hover {
    // uk-form-icon
    color: @form-icon-hover-color;
}

.show-password-input::after {
    content: '\e010';
    font-family: WooCommerce;
}

.hook-inverse() {
    .show-password-input { color: @inverse-form-icon-color; }
    .show-password-input:hover { color: @inverse-form-icon-hover-color; }
}


/*
 * Widgets
 ========================================================================== */

/*
 * Layered nav widget + Rating Filter Widget
 */

.widget_layered_nav,
.widget_rating_filter {

    ul {
        padding: 0;
        list-style: none;
    }

    ul ul { padding-left: 20px; }

    //
    // Link
    //

    li > a {
        // uk-link-reset
        color: inherit !important;
        text-decoration: none !important;
        .hook-link-reset();
    }

    //
    // Checkbox
    //

    li > a::before {
        content: '';
        box-sizing: border-box;
        margin-right: ~'calc(@{margin-xsmall-margin} + 0.25em)';
        // uk-checkbox
        display: inline-block;
        height: @form-radio-size;
        width: @form-radio-size;
        vertical-align: middle;
        background-color: @form-radio-background;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        .hook-form-radio();
    }

    li > a:hover::before {
        background-color: @form-radio-focus-background;
        .hook-form-radio-focus();
    }

    .chosen > a::before {
        background-color: @form-radio-checked-background;
        .hook-form-radio-checked();
    }

    .chosen > a:hover::before {
        background-color: @form-radio-checked-focus-background;
        .hook-form-radio-checked-focus();
    }

    .chosen > a::before {
        .svg-fill(@internal-form-checkbox-image, "#000", @form-radio-checked-icon-color);
    }
}

.widget_layered_nav {

    li > a::before { margin-top: @form-radio-margin-top; }

}

.widget_rating_filter {

    li > a {
        display: flex;
        align-items: center;
    }

    .star-rating { margin-right: 0.25em; }

}

.woocommerce-widget-layered-nav form > ul { margin: 0; }

.tm-element-woo-filter .tm-element-filter-columns {

    :is(.woocommerce-widget-layered-nav-list, .wc-brand-list-layered-nav-product_brand) { column-gap: @column-gutter; }

    /* Desktop and bigger */
    @media (min-width: @breakpoint-large) {
        :is(.woocommerce-widget-layered-nav-list, .wc-brand-list-layered-nav-product_brand) { column-gap: @column-gutter-l; }
    }

    :is(.woocommerce-widget-layered-nav-list, .wc-brand-list-layered-nav-product_brand):has(> :nth-child(@{woocommerce-filter-element-column-count-break})) { column-count: 2; }

    /* Phone landscape and bigger */
    @media (min-width: @breakpoint-small) {
        :is(.woocommerce-widget-layered-nav-list, .wc-brand-list-layered-nav-product_brand):has(> :nth-child(@{woocommerce-filter-element-column-count-break})) { column-count: 2; }
        :is(.woocommerce-widget-layered-nav-list, .wc-brand-list-layered-nav-product_brand):has(> :nth-child(@{internal-woocommerce-filter-element-column-count-break-2})) { column-count: 3; }
    }

    /* Tablet landscape and bigger */
    @media (min-width: @breakpoint-medium) {
        :is(.woocommerce-widget-layered-nav-list, .wc-brand-list-layered-nav-product_brand):has(> :nth-child(@{woocommerce-filter-element-column-count-break})) { column-count: 2; }
        :is(.woocommerce-widget-layered-nav-list, .wc-brand-list-layered-nav-product_brand):has(> :nth-child(@{internal-woocommerce-filter-element-column-count-break-2})) { column-count: 3; }
        :is(.woocommerce-widget-layered-nav-list, .wc-brand-list-layered-nav-product_brand):has(> :nth-child(@{internal-woocommerce-filter-element-column-count-break-3})) { column-count: 4; }
    }

    /* Desktop and bigger */
    @media (min-width: @breakpoint-large) {
        :is(.woocommerce-widget-layered-nav-list, .wc-brand-list-layered-nav-product_brand):has(> :nth-child(@{woocommerce-filter-element-column-count-break})) { column-count: 2; }
        :is(.woocommerce-widget-layered-nav-list, .wc-brand-list-layered-nav-product_brand):has(> :nth-child(@{internal-woocommerce-filter-element-column-count-break-2})) { column-count: 3; }
        :is(.woocommerce-widget-layered-nav-list, .wc-brand-list-layered-nav-product_brand):has(> :nth-child(@{internal-woocommerce-filter-element-column-count-break-3})) { column-count: 4; }
        :is(.woocommerce-widget-layered-nav-list, .wc-brand-list-layered-nav-product_brand):has(> :nth-child(@{internal-woocommerce-filter-element-column-count-break-4})) { column-count: 5; }
        :is(.woocommerce-widget-layered-nav-list, .wc-brand-list-layered-nav-product_brand):has(> :nth-child(@{internal-woocommerce-filter-element-column-count-break-5})) { column-count: 6; }
    }

}

.hook-inverse() {

    .widget_layered_nav,
    .widget_rating_filter {

        //
        // Checkbox
        //

        li > a::before {
            background-color: @inverse-form-radio-background;
            .hook-inverse-form-radio();
        }

        li > a:hover::before {
            background-color: @inverse-form-radio-focus-background;
            .hook-inverse-form-radio-focus();
        }

        .chosen > a::before {
            background-color: @inverse-form-radio-checked-background;
            .hook-inverse-form-radio-checked();
        }

        .chosen > a:hover::before {
            background-color: @inverse-form-radio-checked-focus-background;
            .hook-inverse-form-radio-checked-focus();
        }

        .chosen > a::before {
            .svg-fill(@internal-form-checkbox-image, "#000", @inverse-form-radio-checked-icon-color);
        }
    }
}

.widget_layered_nav_filters {

    ul {
        // uk-subnav
        display: flex;
        flex-wrap: wrap;
        margin-top: -@woocommerce-widget-active-filters-gutter;
        margin-left: -@woocommerce-widget-active-filters-gutter;
        padding: 0;
        list-style: none;
    }

    li {
        // uk-subnav
        flex: none;
        padding-top: @woocommerce-widget-active-filters-gutter;
        padding-left: @woocommerce-widget-active-filters-gutter;
        position: relative;
    }

    li > a {
        text-decoration: none;
        display: inline-block;
        padding: @woocommerce-widget-active-filters-padding-vertical @woocommerce-widget-active-filters-padding-horizontal;
        background: @woocommerce-widget-active-filters-background;
        border-radius: @woocommerce-widget-active-filters-border-radius;
        font-size: @woocommerce-widget-active-filters-font-size;
        color: @woocommerce-widget-active-filters-color;
    }

    li > a when not (@woocommerce-widget-active-filters-border-width = 0) {
        border: @woocommerce-widget-active-filters-border-width solid @woocommerce-widget-active-filters-border;
    }

    li > a:hover {
        background: @woocommerce-widget-active-filters-hover-background;
        color: @woocommerce-widget-active-filters-hover-color;
    }

    li > a:hover when not (@woocommerce-widget-active-filters-border-width = 0) {
        border-color: @woocommerce-widget-active-filters-hover-border;
    }

    li > a::after {
        content: '×';
        margin-left: 5px;
    }
}

.hook-inverse() {

    .widget_layered_nav_filters {

        li > a {
            background: @inverse-woocommerce-widget-active-filters-background;
            color: @inverse-woocommerce-widget-active-filters-color;
        }

        li > a when not (@woocommerce-widget-active-filters-border-width = 0) {
            border-color: @inverse-woocommerce-widget-active-filters-border;
        }

        li > a:hover {
            background: @inverse-woocommerce-widget-active-filters-hover-background;
            color: @inverse-woocommerce-widget-active-filters-hover-color;
        }

        li > a:hover when not (@woocommerce-widget-active-filters-border-width = 0) {
            border-color: @inverse-woocommerce-widget-active-filters-hover-border;
        }
    }

}

/*
 * Product categories widget
 */

.widget_product_categories {

    ul {
        // uk-nav
        padding: 0;
        list-style: none;
    }

    li > a {
        display: inline-block;
        // uk-nav
        text-decoration: none;
    }

    //
    //  Level 1
    //

    > ul {
        // Product count same color as nav
        color: @nav-default-item-color;
        // uk-nav-default
        .hook-nav-default();
    }

    > ul > li > a {
        // uk-nav
        padding: @nav-item-padding-vertical @nav-item-padding-horizontal;
        // uk-nav-default
        color: @nav-default-item-color;
        .hook-nav-default-item();
    }

    /* Hover + Focus */
    > ul > li > a:hover {
        // uk-nav-default
        color: @nav-default-item-hover-color;
        .hook-nav-default-item-hover();
    }

    /* Active */
    > ul > li.current-cat > a {
        // uk-nav-default
        color: @nav-default-item-active-color;
        .hook-nav-default-item-active();
    }

    //
    // Level 2
    //

    ul.children {
        // uk-nav
        padding: @nav-sublist-padding-vertical 0 @nav-sublist-padding-vertical @nav-sublist-padding-left;
        .hook-nav-sub();
    }

    //
    // Level 3 and deeper
    //

    ul.children ul {
        // uk-nav
        padding-left: @nav-sublist-deeper-padding-left;
    }

    //
    // Sublists
    //

    ul.children a {
        // uk-nav
        padding: @nav-sublist-item-padding-vertical 0;
        // uk-nav-default
        color: @nav-default-sublist-item-color;
    }

    ul.children a:hover { color: @nav-default-sublist-item-hover-color; }

    ul.children li.current-cat > a { color: @nav-default-sublist-item-active-color; }
}

.hook-inverse() {

    .widget_product_categories {

        > ul {
            // Product count same color as nav
            color: @inverse-nav-default-item-color;
        }

        > ul > li > a {
            // uk-nav-default
            color: @inverse-nav-default-item-color;
            .hook-inverse-nav-default-item();
        }

        /* Hover + Focus */
        > ul > li > a:hover {
            // uk-nav-default
            color: @inverse-nav-default-item-hover-color;
            .hook-inverse-nav-default-item-hover();
        }

        /* Active */
        > ul > li.current-cat > a {
            // uk-nav-default
            color: @inverse-nav-default-item-active-color;
            .hook-inverse-nav-default-item-active();
        }

        ul.children a {
            // uk-nav-default
            color: @inverse-nav-default-sublist-item-color;
        }

        ul.children a:hover { color: @inverse-nav-default-sublist-item-hover-color; }

        ul.children li.current-cat > a { color: @inverse-nav-default-sublist-item-active-color; }
    }
}

/*
 * Product search widget
 */

.widget_product_search {

    //
    // Form
    //

    .woocommerce-product-search {
        // uk-search
        display: inline-block;
        position: relative;
        max-width: 100%;
        margin: 0;
        // uk-search-default
        width: @search-default-width;
    }

    //
    // Input
    //

    input::-webkit-search-cancel-button,
    input::-webkit-search-decoration { -webkit-appearance: none; }

    input::-moz-placeholder { opacity: 1; }

    input {
        // uk-search
        box-sizing: border-box;
        margin: 0;
        border-radius: 0;
        font: inherit;
        overflow: visible;
        -webkit-appearance: none;
        vertical-align: middle;
        width: 100%;
        border: none;
        color: @search-color;
        .hook-search-input();
    }

    input:focus { outline: none; }

    input:-ms-input-placeholder { color: @search-placeholder-color !important; }
    input::placeholder { color: @search-placeholder-color; }

    .uk-search-default { width: @search-default-width; }

    //
    // Button
    //

    button {
        // uk-icon
        margin: 0;
        border: none;
        border-radius: 0;
        overflow: visible;
        font: inherit;
        color: inherit;
        text-transform: none;
        padding: 0;
        background-color: transparent;
        display: inline-block;
        fill: currentcolor;
        line-height: 0;
        cursor: pointer;
        // uk-icon-search
    }

    button {
        text-indent: -9999px;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        .svg-fill("../../images/icons/search.svg", "#000", @search-icon-color);
        // uk-search-icon
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
    }

    //
    // uk-search-default
    //

    input {
        height: @search-default-height;
        padding-left: @search-default-padding-horizontal;
        padding-right: @search-default-padding-horizontal;
        background: @search-default-background;
        .hook-search-default-input();
    }

    input:focus {
        background-color: @search-default-focus-background;
        .hook-search-default-input-focus();
    }

    button {
        box-sizing: content-box;
        width: @search-default-icon-width;
        padding-left: @search-default-padding-horizontal;
        padding-right: @search-default-padding-horizontal;
    }
    input { padding-right: (@search-default-icon-width + @search-default-padding-horizontal + @search-default-icon-padding); }

}

.hook-inverse() {

    .widget_product_search {

        input { color: @inverse-search-color; }

        input:-ms-input-placeholder { color: @inverse-search-placeholder-color !important; }
        input::placeholder { color: @inverse-search-placeholder-color; }

        button { .svg-fill("../../images/icons/search.svg", "#000", @inverse-search-icon-color); }

        input {
            background-color: @inverse-search-default-background;
            .hook-inverse-search-default-input();
        }

        input:focus {
            background-color: @inverse-search-default-focus-background;
            .hook-inverse-search-default-input-focus();
        }
    }
}

/*
 * Price filter widget
 */

.widget_price_filter {

    .price_slider { margin-bottom: @global-margin; }

    .price_slider_amount {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .button {
            flex: none;
            margin-left: @global-small-margin;
            // uk-button-small
            padding: 0 @button-small-padding-horizontal;
            line-height: @button-small-line-height;
            font-size: @button-small-font-size;
            .hook-button-small();
        }

        .price_label {
            flex: 1;
            order: -1;
            // Needed for Filter element to expand dropdown
            white-space: nowrap;
            // uk-text-small
            font-size: @text-small-font-size;
            line-height: @text-small-line-height;
            .hook-text-small();
        }

        .clear { display: none; }
    }

    .ui-slider {
        position: relative;
        // uk-form-range-track
        height: @form-range-track-height;
        background: @form-range-track-background;
        .hook-form-range-track();
    }

    .ui-slider .ui-slider-handle {
        position: absolute;
        z-index: 2;
        top: ~'calc((@{form-range-track-height} / 2) - (@{form-range-thumb-height} / 2))';
        outline: none;
        cursor: pointer;
        box-sizing: border-box;
        // uk-form-range-thumb
        height: @form-range-thumb-height;
        width: @form-range-thumb-width;
        border-radius: @form-range-thumb-border-radius;
        background: @form-range-thumb-background;
        .hook-form-range-thumb();
    }

    .ui-slider .ui-slider-handle:last-child { transform: translateX(~'calc(-1 * @{form-range-thumb-width})'); }

    .ui-slider .ui-slider-range {
        position: absolute;
        z-index: 1;
        top: 0;
        height: 100%;
        // uk-form-range-track
        background: @form-range-track-focus-background;
        .hook-form-range-track-focus();
    }
}

.hook-inverse() {

    .widget_price_filter {

        .ui-slider {
            background: @inverse-form-range-track-background;
            .hook-inverse-form-range-track();
        }

        .ui-slider .ui-slider-handle {
             background: @inverse-form-range-thumb-background;
            .hook-inverse-form-range-thumb();
        }

        .ui-slider .ui-slider-range {
            background: @inverse-form-range-track-focus-background;
            .hook-inverse-form-range-track-focus();
        }
    }

}

/*
 * Brand thumnails
 */

.widget_brand_thumbnails {

    .brand-thumbnails { padding-left: 0; }

}


/*
 * YOOtheme Pro Source
 ========================================================================== */

[class*="tm-source"] { display: inline-block; }
