/*
 * LP Variation Display — Custom stylesheet
 * =========================================================
 * This is the WORKING Custom stylesheet.
 * It contains the complete LP visual skin.
 *
 * Tip: search for "SECTION:" to jump between blocks.
 * Factory copy: assets/css/defaults/custom.css
 */

/* =========================================================
 * SECTION: WooCommerce Select / Accessibility — START
 * ---------------------------------------------------------
 * .lp-variation-select-hidden
 * Visually hides the original WooCommerce <select> while
 * keeping it available to WooCommerce variation logic.
 * ========================================================= */

.lp-variation-select-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* =========================================================
 * SECTION: WooCommerce Select / Accessibility — END
 * ========================================================= */


/* =========================================================
 * SECTION: Variation Block — START
 * ---------------------------------------------------------
 * form.variations_form table.variations
 * Overall WooCommerce variation block, rows and labels.
 * ========================================================= */

form.variations_form table.variations,
form.variations_form table.variations tbody {
    display: block;
    width: 100%;
}

form.variations_form table.variations tr {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-bottom: 20px;
}

form.variations_form table.variations th.label,
form.variations_form table.variations td.value {
    display: block;
    width: 100%;
    padding: 0;
}

form.variations_form table.variations th.label {
    margin-bottom: 10px;
    text-align: right;
}

form.variations_form table.variations th.label label {
    display: block;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

/* =========================================================
 * SECTION: Variation Block — END
 * ========================================================= */


/* =========================================================
 * SECTION: Attribute Label / Description — START
 * ---------------------------------------------------------
 * form.variations_form th.label label = attribute heading
 * .lp-attribute-description           = optional helper text
 * ========================================================= */

form.variations_form .lp-attribute-description {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: #646970;
}

/* =========================================================
 * SECTION: Attribute Label / Description — END
 * ========================================================= */


/* =========================================================
 * SECTION: Cards — START
 * ---------------------------------------------------------
 * .lp-variation-options  = cards container
 * .lp-variation-option   = one clickable variation card
 * .lp-variation-value    = variation value / label
 * .lp-variation-price    = optional price inside the card
 * .is-selected           = selected card state
 * ========================================================= */

.lp-variation-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
}

.lp-variation-option {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    min-height: 64px;
    padding: 10px 16px;
    border: 1px solid #d0d5dd;
    border-radius: 7px;
    background: #fff;
    color: #1d2327;
    font-family: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, opacity .15s ease;
}

.lp-variation-option:not(.is-disabled):hover {
    border-color: #667085;
}

.lp-variation-option.is-selected {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    background: #f6faff;
}

.lp-variation-value,
.lp-variation-price {
    position: relative;
    z-index: 2;
    white-space: nowrap;
}

.lp-variation-value {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.lp-variation-price {
    margin-top: 5px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: #646970;
}

.lp-variation-option.is-selected .lp-variation-price {
    color: #2271b1;
}

/* =========================================================
 * SECTION: Cards — END
 * ========================================================= */




/* =========================================================
 * SECTION: Cards Color — START
 * ---------------------------------------------------------
 * .lp-variation-color-options = color cards container
 * .lp-variation-color-card    = one clickable color card
 *
 * This display mode is intended for attributes whose LP Type
 * is Color. It has independent styles from normal Cards.
 * ========================================================= */

.lp-variation-color-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.lp-variation-color-card {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 48px;
    min-height: 48px;
    padding: 7px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    color: #1d2327;
    font: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, opacity .15s ease;
}

.lp-variation-color-card .lp-variation-choice-content {
    flex-direction: column;
    gap: 5px;
}

.lp-variation-color-card .lp-variation-swatch-color {
    width: 30px;
    height: 30px;
}

.lp-variation-color-card .lp-variation-value {
    font-size: 12px;
    font-weight: 600;
}

.lp-variation-color-card .lp-variation-price {
    margin-top: 0;
    font-size: 12px;
}

.lp-variation-color-card:not(.is-disabled):hover {
    border-color: #667085;
}

.lp-variation-color-card.is-selected {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    background: #f6faff;
}

/* =========================================================
 * SECTION: Cards Color — END
 * ========================================================= */


/* =========================================================
 * SECTION: Cards Image — START
 * ---------------------------------------------------------
 * .lp-variation-image-options = image cards container
 * .lp-variation-image-card    = one clickable image card
 *
 * This display mode is intended for attributes whose LP Type
 * is Image. It has independent styles from normal Cards.
 * ========================================================= */

.lp-variation-image-options {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    margin: 0;
}

.lp-variation-image-card {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 86px;
    min-height: 86px;
    padding: 8px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    color: #1d2327;
    font: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, opacity .15s ease;
}

.lp-variation-image-card .lp-variation-choice-content {
    flex-direction: column;
    gap: 7px;
}

.lp-variation-image-card .lp-variation-swatch-image {
    width: 60px;
    height: 60px;
    border-radius: 6px;
}

.lp-variation-image-card .lp-variation-value {
    font-size: 13px;
    font-weight: 600;
}

.lp-variation-image-card .lp-variation-price {
    margin-top: 0;
    font-size: 12px;
}

.lp-variation-image-card:not(.is-disabled):hover {
    border-color: #667085;
}

.lp-variation-image-card.is-selected {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    background: #f6faff;
}

/* =========================================================
 * SECTION: Cards Image — END
 * ========================================================= */


/* =========================================================
 * SECTION: Radio Buttons — START
 * ---------------------------------------------------------
 * .lp-variation-radio-options = radio group container
 * .lp-variation-radio-option  = one radio choice
 * ========================================================= */

.lp-variation-radio-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 0;
}

.lp-variation-radio-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 2px;
    font: inherit;
    cursor: pointer;
    overflow: hidden;
}

.lp-variation-radio-option input {
    margin: 0;
}

.lp-variation-radio-option .lp-variation-price {
    margin-top: 0;
    margin-inline-start: 2px;
}

/* =========================================================
 * SECTION: Radio Buttons — END
 * ========================================================= */



/* =========================================================
 * SECTION: Value Swatches — START
 * ---------------------------------------------------------
 * .lp-variation-choice-content = visual + optional text
 * .lp-variation-swatch         = common swatch element
 * .lp-variation-swatch-color   = color value
 * .lp-variation-swatch-image   = image value
 * ========================================================= */

.lp-variation-choice-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
}

.lp-variation-swatch {
    position: relative;
    z-index: 2;
    display: inline-flex;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 50%;
    overflow: hidden;
    box-sizing: border-box;
}

.lp-variation-swatch-color {
    background: var(--lp-swatch-color, transparent);
}

.lp-variation-swatch-image {
    border-radius: 5px;
}

.lp-variation-swatch-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lp-product-card-attribute-value .lp-variation-swatch {
    width: 18px;
    height: 18px;
}

.lp-product-card-attribute-value .lp-variation-value {
    font: inherit;
    line-height: inherit;
}

/* =========================================================
 * SECTION: Value Swatches — END
 * ========================================================= */

/* =========================================================
 * SECTION: Unavailable / Disabled States — START
 * ---------------------------------------------------------
 * .is-disabled                     = unavailable choice
 * .lp-cross-unavailable            = enables cross-out lines
 * .lp-variation-hidden-unavailable = hides unavailable choice
 * ========================================================= */

.lp-variation-option.is-disabled,
.lp-variation-color-card.is-disabled,
.lp-variation-image-card.is-disabled,
.lp-variation-radio-option.is-disabled {
    opacity: .48;
    cursor: not-allowed;
}

.lp-variation-radio-option.is-disabled input {
    pointer-events: none;
}

.lp-cross-unavailable .lp-variation-option.is-disabled::before,
.lp-cross-unavailable .lp-variation-option.is-disabled::after,
.lp-cross-unavailable .lp-variation-color-card.is-disabled::before,
.lp-cross-unavailable .lp-variation-color-card.is-disabled::after,
.lp-cross-unavailable .lp-variation-image-card.is-disabled::before,
.lp-cross-unavailable .lp-variation-image-card.is-disabled::after,
.lp-cross-unavailable .lp-variation-radio-option.is-disabled::before,
.lp-cross-unavailable .lp-variation-radio-option.is-disabled::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -12%;
    width: 124%;
    height: 1.5px;
    background: currentColor;
    opacity: .55;
    transform-origin: center;
    z-index: 3;
    pointer-events: none;
}

.lp-cross-unavailable .lp-variation-option.is-disabled::before,
.lp-cross-unavailable .lp-variation-color-card.is-disabled::before,
.lp-cross-unavailable .lp-variation-image-card.is-disabled::before,
.lp-cross-unavailable .lp-variation-radio-option.is-disabled::before {
    transform: rotate(-18deg);
}

.lp-cross-unavailable .lp-variation-option.is-disabled::after,
.lp-cross-unavailable .lp-variation-color-card.is-disabled::after,
.lp-cross-unavailable .lp-variation-image-card.is-disabled::after,
.lp-cross-unavailable .lp-variation-radio-option.is-disabled::after {
    transform: rotate(18deg);
}

.lp-variation-hidden-unavailable {
    display: none !important;
}

/* =========================================================
 * SECTION: Unavailable / Disabled States — END
 * ========================================================= */


/* =========================================================
 * SECTION: Reset Variations Link — START
 * ---------------------------------------------------------
 * form.variations_form .reset_variations
 * Standard WooCommerce reset-variation link positioning.
 * ========================================================= */

form.variations_form .reset_variations {
    display: inline-block;
    margin-top: 10px;
    margin-inline-start: 0;
}

/* =========================================================
 * SECTION: Reset Variations Link — END
 * ========================================================= */


/* =========================================================
 * SECTION: LP Custom Dropdown — START
 * ---------------------------------------------------------
 * .lp-variation-dropdown              = wrapper
 * .lp-variation-dropdown-trigger      = visible opener button
 * .lp-variation-dropdown-selected     = current value text
 * .lp-variation-dropdown-arrow        = arrow icon
 * .lp-variation-dropdown-menu         = opened menu
 * .lp-variation-dropdown-option       = one menu option
 * .lp-variation-dropdown-option-price = option price
 * .is-open                            = opened dropdown state
 * .is-selected                        = selected option state
 * ========================================================= */

.lp-variation-dropdown {
    position: relative;
    width: 100%;
    max-width: 420px;
}

.lp-variation-dropdown-trigger {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    border: 1px solid #d0d5dd;
    border-radius: 7px;
    background: #fff;
    color: #1d2327;
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.lp-variation-dropdown-trigger:hover,
.lp-variation-dropdown.is-open .lp-variation-dropdown-trigger {
    border-color: #667085;
}

.lp-variation-dropdown-trigger:focus-visible {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
}

.lp-variation-dropdown-selected {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lp-variation-dropdown-arrow {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-inline-end: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s ease;
}

.lp-variation-dropdown.is-open .lp-variation-dropdown-arrow {
    transform: rotate(225deg) translate(-2px, -2px);
}

.lp-variation-dropdown-menu {
    position: absolute;
    z-index: 999;
    top: calc(100% + 6px);
    inset-inline: 0;
    display: none;
    max-height: 300px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid #d0d5dd;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}

.lp-variation-dropdown.is-open .lp-variation-dropdown-menu {
    display: block;
}

.lp-variation-dropdown-option {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 11px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #1d2327;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.lp-variation-dropdown-option:not(.is-disabled):hover,
.lp-variation-dropdown-option:not(.is-disabled):focus-visible {
    outline: none;
    background: #f6f7f7;
}

.lp-variation-dropdown-option.is-selected {
    background: #f6faff;
    font-weight: 600;
}

.lp-variation-dropdown-option-price {
    flex: 0 0 auto;
    white-space: nowrap;
    color: #646970;
    font-size: .95em;
    font-weight: 500;
}

.lp-variation-dropdown-option.is-selected .lp-variation-dropdown-option-price {
    color: #2271b1;
}

.lp-variation-dropdown-option.is-disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* =========================================================
 * SECTION: LP Custom Dropdown — END
 * ========================================================= */




/* =========================================================
 * SECTION: Product Cards — START
 * ---------------------------------------------------------
 * .lp-product-card-attributes      = values container in loop
 * .lp-product-card-attribute-value = one read-only value
 * .lp-product-card-attribute-more  = linked “More +N” remaining-values indicator
 * ========================================================= */

.lp-product-card-attributes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 7px 0;
    justify-content: center;
}

.lp-product-card-attribute-value {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 8px;
    border: 1px solid #d0d5dd;
    border-radius: 5px;
    background: #fff;
    color: #1d2327;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}


.lp-product-card-attribute-more {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    color: #2271b1;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color .15s ease, text-decoration-thickness .15s ease;
    font-size: 14px;
}

.lp-product-card-attribute-more:hover {
    color: #135e96;
    text-decoration-thickness: 2px;
}

.lp-product-card-attribute-more:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* =========================================================
 * SECTION: Product Cards — END
 * ========================================================= */


/* =========================================================
 * SECTION: Product Cards — Text — START
 * ---------------------------------------------------------
 * .lp-product-card-text-value = text attribute value in loop
 * Independent from Single Product .lp-variation-option.
 * ========================================================= */
.lp-product-card-text-value {
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 5px;
}
/* =========================================================
 * SECTION: Product Cards — Text — END
 * ========================================================= */

/* =========================================================
 * SECTION: Product Cards — Color — START
 * ---------------------------------------------------------
 * .lp-product-card-color-value = color value in loop
 * .lp-product-card-type-color  = color-values container
 * Independent from Single Product Cards Color.
 * ========================================================= */
.lp-product-card-color-value {
    min-width: 28px;
    min-height: 28px;
    padding: 3px;
    border-radius: 999px;
}
.lp-product-card-color-value .lp-variation-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.lp-product-card-color-value .lp-variation-value {
    margin-inline-start: 4px;
}
/* =========================================================
 * SECTION: Product Cards — Color — END
 * ========================================================= */

/* =========================================================
 * SECTION: Product Cards — Image — START
 * ---------------------------------------------------------
 * .lp-product-card-image-value = image value in loop
 * .lp-product-card-type-image  = image-values container
 * Independent from Single Product Cards Image.
 * ========================================================= */
.lp-product-card-image-value {
    min-height: 42px;
    padding: 3px 6px;
    border-radius: 6px;
}
.lp-product-card-image-value .lp-variation-swatch {
    width: 34px;
    height: 34px;
    border-radius: 5px;
}
.lp-product-card-image-value .lp-variation-value {
    margin-inline-start: 5px;
}
/* =========================================================
 * SECTION: Product Cards — Image — END
 * ========================================================= */

/* =========================================================
 * SECTION: Product Cards — More Link — START
 * .lp-product-card-attribute-more = linked remaining count
 * ========================================================= */
/* Use the base .lp-product-card-attribute-more rules above. */
/* =========================================================
 * SECTION: Product Cards — More Link — END
 * ========================================================= */

/* =========================================================
 * SECTION: Mobile — START
 * ---------------------------------------------------------
 * Small-screen overrides for cards and custom dropdown.
 * ========================================================= */

@media (max-width: 600px) {
    .lp-variation-options {
        gap: 7px;
    }

    .lp-variation-option {
        min-width: 82px;
        min-height: 58px;
        padding: 8px 12px;
    }

    .lp-variation-value {
        font-size: 14px;
    }

    .lp-variation-price {
        font-size: 13px;
    }

    .lp-variation-dropdown {
        max-width: none;
    }
}

/* =========================================================
 * SECTION: Mobile — END
 * ========================================================= */