/*
 Theme Name:   Basel Child
 Theme URI:    http://ximedesign.com/basel/
 Description:  Basel Child Theme
 Author:       Xtemos
 Author URI:   http://xtemos.com
 Template:     basel
 Version:      1.0.0
 Text Domain:  basel-child
*/

/* --- CommerceKit Attribute Swatches Customization (Source Match: User Request) --- */

/* 1. Layout Adjustments: Scale and Stack - Force Vertical Layout */

/* Flex column layout for the row to ensure stacking */
.variations_form table.variations tbody tr {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}

/* Reset table display for parent elements */
.variations_form table.variations,
.variations_form table.variations tbody {
    display: block !important;
    width: 100% !important;
    border: none !important;
}

/* Label Cell - First Row */
.variations_form table.variations td.label {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    background-color: transparent !important;
}

/* Label Text Construction using Font-Size: 0 Hack to remove whitespace */
.variations_form table.variations td.label label {
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: -1em !important;
    display: inline-block !important;
    margin: 0 !important;
}

/* Restore visible text in strong tag */
.variations_form table.variations td.label label strong {
    font-size: 12px !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: #222 !important;
}

/* Add Colon directly via pseudo-element with NO spacing */
.variations_form table.variations td.label label strong::after {
    content: ":" !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Selection Text - STRICTLY HIDDEN */
body .variations_form table.variations td.label .cgkit-chosen-attribute,
body .variations_form table.variations td.label .ckit-chosen-attribute_semicolon,
body .variations_form .cgkit-chosen-attribute,
body .variations_form .ckit-chosen-attribute_semicolon {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
}

/* Value/Swatches Cell - Second Row (Beneath) */
.variations_form table.variations td.value {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
}

/* 2. Swatch Styling */

/* Swatch Container */
.cgkit-as-wrap .cgkit-attribute-swatches {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
}

/* Swatch Reset */
.cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    list-style: none !important;
}

/* Swatch Button - Default (White bg, Black Border) */
.cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button button {
    background-color: #fff !important;
    border: 1px solid #111 !important;
    /* Defined Borders */
    color: #111 !important;
    font-size: 14px !important;
    /* Slightly adjusted to match image scale */
    font-weight: 400 !important;
    min-width: 40px !important;
    height: 40px !important;
    line-height: 38px !important;
    padding: 0 4px !important;
    border-radius: 2px !important;
    /* Very subtle radius as per image */
    box-shadow: none !important;
    text-align: center !important;
    transition: all 0.2s ease;
}

/* Hover State */
.cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button button:hover {
    background-color: #f8f8f8 !important;
    border-color: #000 !important;
}

/* Selected State - Black Bg, White Text (Matches User Image) */
.cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button button.cgkit-swatch-selected,
.cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button button.selected {
    background-color: #111 !important;
    /* Solid Black Background */
    border: 1px solid #111 !important;
    /* Match background */
    color: #fff !important;
    /* White Text */
    font-weight: 400 !important;
}

/* Disabled State */
.cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch>button.cgkit-disabled {
    opacity: 0.5 !important;
    border-color: #ddd !important;
    background-color: #fafafa !important;
    cursor: not-allowed !important;
    color: #ccc !important;
}

/* Hide legacy/unused elements */
.cgkit-swatch-title,
.cgkit-attribute-swatches-wrap legend {
    display: none !important;
}

/* Reset Link */
.reset_variations {
    display: inline-block !important;
    margin-top: 8px !important;
    font-size: 11px !important;
    color: #999 !important;
    text-decoration: underline !important;
}

/* --- YITH WooCommerce Ajax Product Filter Customization --- */

/* Force Flex Layout for Filter Items (Ul or Div) */
.yith-wcan-filter .filter-items {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    /* Forces items to equal height */
}

/* Filter Item Container */
.yith-wcan-filter .filter-item {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
    /* Override any floats */
}

/* Make inner clickable elements fill the space */
.yith-wcan-filter .filter-item>a,
.yith-wcan-filter .filter-item>label,
.yith-wcan-filter .filter-item>div,
.yith-wcan-filter .filter-item>label>a {
    display: flex !important;
    flex: 1 !important;
    /* Grow to fill height */
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;

    /* Spacing and Line Height Adjustments */
    line-height: 1.1 !important;
    gap: 2px !important;
    /* Reduce space between image/text/count */
}

/* Reset margins for text and count specific elements */
.yith-wcan-filter .filter-item .term-label,
.yith-wcan-filter .filter-item .count,
.yith-wcan-filter .filter-item small {
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
}

/* Ensure images scale correctly */
.yith-wcan-filter .filter-item .term-image img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin-bottom: 5px !important;
    flex-shrink: 0 !important;
}

/* --- Standard WooCommerce Category Grid Equal Heights (Likely what is in screenshot) --- */

/* Target Basel/Woo Category Grid Items */
.category-grid-item,
.product-category {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
}

/* Ensure the inner category content card stretches */
.category-grid-item .category-content,
.product-category .woocommerce-loop-category__title,
.product-category>a {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    /* Center content vertically */
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Fix for nested anchors in categories */
.category-grid-item .category-content>a.category-link {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: 100% !important;
}

/* Specific fix for text wrapping issues causing height diff */
.category-grid-item h3.category-title,
.product-category h2.woocommerce-loop-category__title {
    min-height: 48px;
    /* Force minimum height for 2 lines of text */
    display: flex;
    align-items: center;
    justify-content: center;
}