/* =========================================
   1. Product Categories
   ========================================= */
.cc-product-cats {
    font-size: 0.875rem; /* 14px */
    color: var(--e-global-color-text);
    margin-bottom: 0.9375rem; /* 15px */
}

.cc-product-cats .cc-cat-label {
    font-weight: 600;
    color: var(--e-global-color-secondary);
}

.cc-product-cats a {
    color: var(--e-global-color-accent);
    text-decoration: none;
    font-weight: 500;
}

.cc-product-cats a:hover {
    text-decoration: underline;
}


/* =========================================
   2. Sales Countdown Timer
   ========================================= */
.cc-sales-countdown {
    display: flex;
    gap: 0.75rem; /* 12px */
    margin-bottom: 1.25rem; /* 20px */
}

.cc-time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ffffff; 
    border: 1px solid #e2e2e2;
    border-radius: 0.125rem; /* 2px */
    padding: 0.75rem 0.625rem; /* 12px 10px */
    min-width: 4.0625rem; /* 65px */
}

.cc-val {
    font-size: 1.5rem; /* 24px */
    font-weight: 800;
    line-height: 1.1;
    color: var(--e-global-color-secondary); 
}

.cc-time-box:last-child .cc-val {
    color: var(--e-global-color-accent); 
}

.cc-label {
    font-size: 0.8125rem; /* 13px */
    text-transform: uppercase;
    font-weight: 400;
    color: var(--e-global-color-text); 
    margin-top: 0.25rem; /* 4px */
}

.cc-sale-ended {
    font-weight: bold;
    color: var(--e-global-color-accent);
    padding: 0.625rem 0; /* 10px */
}

.cc-sales-countdown-heading h2 {
    font-size: 1rem; /* 16px */
    margin-bottom: 0.5rem; 
    padding-bottom: 0;
    color: var(--e-global-color-secondary); 
    font-weight: 600;
}

/* Hide empty Elementor shortcode widgets to prevent flex gaps */
.elementor-widget-shortcode:has(.elementor-shortcode:empty) {
    display: none !important;
}


/* =========================================
   3. WooCommerce Single Product Layout
   ========================================= */

/* Reset variations table & remove grey backgrounds */
table.variations tbody tr:hover > td, 
table.variations tbody tr:hover > th,
table.variations tbody tr > td, 
table.variations tbody tr > th {
    background-color: transparent !important;
}

table.variations tr {
    margin-bottom: 20px;
}

/* Style the Label */
table.variations th.label {
    text-align: left;
    margin-bottom: 0; 
    padding: 0;
}

table.variations th.label label {
    font-weight: 600;
    font-size: 1.125rem; /* 18px */
    color: #222222;
}

/* Style the Variation Buttons (Swatches) */
ul.variable-items-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

ul.variable-items-wrapper li.variable-item {
    background-color: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 3px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0; 
}

/* Hover and Selected state for variations (Shadows removed) */
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item),
ul.variable-items-wrapper li.variable-item:hover,
ul.variable-items-wrapper li.variable-item.selected {
    border-color: var(--e-global-color-secondary);
    box-shadow: none !important; 
    -webkit-box-shadow: none !important;
}

.variable-item-span {
    font-size: 0.9375rem; /* 15px */
    color: #222222;
    font-weight: 500;
}

/* Layout for Quantity and Add To Cart Row */
.woocommerce-variation-add-to-cart {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* Quantity Box Styling */
.woocommerce-variation-add-to-cart .quantity {
    border-radius: 4px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.minus.qib-button {
    margin-inline-start: 0 !important;
    margin-inline-end: var(--button-spacing, 10px);
}

/* Hide the default WooCommerce up/down arrows on the number input */
.woocommerce-variation-add-to-cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-variation-add-to-cart .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.woocommerce-variation-add-to-cart .quantity input.qty {
    -moz-appearance: textfield; /* Firefox */
    background: transparent;
    border: none;
	border-radius: 0.6rem;
    box-shadow: none;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    width: 45px;
    padding: 0;
    margin: 0;
    color: #222222;
}

/* Active Add To Cart Button Styling */
button.single_add_to_cart_button {
    background-color: var( --e-global-color-e3e7e8c ) !important; 
    color: #ffffff;
    border: none;
    border-radius: 4px;
    height: 45px;
    padding: 0 32px;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
}

button.single_add_to_cart_button:hover {
    background-color: var(--e-global-color-primary) !important; 
}

/* WooCommerce Disabled Add To Cart Button Overrides */
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt.disabled, 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt.disabled:hover, 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled, 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled:hover, 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled[disabled], 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled[disabled]:hover, 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt.disabled, 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt.disabled:hover, 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled, 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled:hover, 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled[disabled], 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled[disabled]:hover, 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.disabled, 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.disabled:hover, 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled, 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled:hover, 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled[disabled], 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled[disabled]:hover, 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt.disabled, 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt.disabled:hover, 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled, 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled:hover, 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled[disabled], 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled[disabled]:hover, 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt.disabled, 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt.disabled:hover, 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled, 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled:hover, 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled[disabled], 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled[disabled]:hover, 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt.disabled, 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt.disabled:hover, 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled, 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled:hover, 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled[disabled], 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled[disabled]:hover, 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt.disabled, 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt.disabled:hover, 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled, 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled:hover, 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled[disabled], 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled[disabled]:hover, 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt.disabled, 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt.disabled:hover, 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled, 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled:hover, 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled[disabled], 
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled[disabled]:hover {
    background-color: var(--e-global-color-accent) !important;
    color: #ffffff;
    opacity: 0.6; 
    cursor: not-allowed;
}


/* =========================================
   4. Share Product Section
   ========================================= */
.cc-share-section {
    margin-top: 1.25rem; /* 20px */
    margin-bottom: 1.25rem;
}

.cc-share-title {
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
    margin-bottom: 0.9375rem; /* 15px */
    color: var(--e-global-color-primary); 
}

/* Social Icons */
.cc-share-icons {
    display: flex;
    gap: 0.625rem; /* 10px */
    margin-bottom: 1.25rem; /* 20px */
    flex-wrap: wrap;
}

.cc-share-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem; /* 40px */
    height: 2.5rem; /* 40px */
    border-radius: 50%;
    background-color: #f2f2f2; /* Light grey from mockup */
    color: #222222;
    text-decoration: none;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.cc-share-icons a:hover {
    background-color: var(--e-global-color-accent);
    color: #ffffff;
    transform: translateY(-2px);
}

.cc-share-icons a svg {
    width: 1.125rem; /* 18px */
    height: 1.125rem; /* 18px */
    fill: currentColor; 
    transition: fill 0.3s ease;
}   

/* Copy Link Area */
.cc-copy-link-wrapper {
    display: flex;
    gap: 0.625rem; /* 10px */
}

.cc-copy-link-wrapper input {
    flex: 1;
    padding: 0.625rem 0.9375rem; /* 10px 15px */
    border: 1px solid #e2e2e2;
    border-radius: 0.25rem; /* 4px */
    background: #ffffff;
    color: #666666;
    font-size: 0.9rem;
    outline: none;
    box-shadow: none;
}

.cc-copy-link-wrapper button {
    background-color: #002D5B; /* Navy blue from your mockup */
    color: #ffffff;
    border: none;
    padding: 0 1.5rem; /* 24px */
    border-radius: 0.25rem; /* 4px */
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cc-copy-link-wrapper button:hover {
    background-color: #001B36; /* Darker navy on hover */
}


/* =========================================
   5. YITH Wishlist Button
   ========================================= */
.yith-wcwl-add-to-wishlist-button__label {
    color: var(--e-global-color-secondary);
}

.yith-wcwl-add-to-wishlist-button:not(.yith-wcwl-add-to-wishlist-button--themed-button) svg.yith-wcwl-add-to-wishlist-button-icon {
    color: var(--e-global-color-secondary);
    width: 20px;
}