/*
CTC Separate Stylesheet
Updated: 2025-04-18 18:07:57
Theme Name: Sentimood Theme
Theme URI: https://woocommerce.com/products/storefront/
Template: storefront
Author: Automattic
Author URI: https://woocommerce.com/
Description: Storefront is the perfect theme for your next WooCommerce project. Designed and developed by WooCommerce Core developers, it features a bespoke integration with WooCommerce itself plus many of the most popular customer facing WooCommerce extensions. There are several layout & color options to personalise your shop, multiple widget regions, a responsive design and much more. Developers will love its lean and extensible codebase making it a joy to customize and extend. Looking for a WooCommerce theme? Look no further!
Tags: e-commerce,two-columns,left-sidebar,right-sidebar,custom-background,custom-colors,custom-header,custom-menu,featured-images,full-width-template,threaded-comments,accessibility-ready,rtl-language-support,footer-widgets,sticky-post,theme-options,editor-style
Version: 4.6.1.1744999677
*/

/* Load Poppins globally */
body {
    font-family: 'Poppins', sans-serif;
}

/* WooCommerce buttons */
.variable-item.button-variable-item {
    font-family: 'Poppins', sans-serif;
    font-weight: 600; /* Adjust weight if needed */
}

/* Material options */
#material-options label {
    font-family: 'Poppins', sans-serif !important;
}


/* Hide material options by default */
#material-options {
    display: none; /* Hidden initially */
    margin-bottom: 20px; /* Add space between material options and variations */
}

/* Style the radio buttons and images */
#material-options label {
    display: inline-block;
    margin-right: 15px;
    margin-top: 10px;
    text-align: center; /* Center text (labels) under images */
}

/* Limit the size of the images */
#material-options img {
    width: 80px; /* Set the width of the material images */
    height: 80px; /* Set the height of the material images */
    border: 2px solid #ddd;
    border-radius: 8px;
    object-fit: cover; /* Ensures images are scaled correctly */
    transition: transform 0.3s ease;
}

/* On hover, slightly zoom the image */
#material-options img:hover {
    transform: scale(1.1); /* Slight zoom effect on hover */
}

/* Add a price hint below each image */
#material-options .wapf-pricing-hint {
    font-size: 14px;
    color: #555;
    margin-top: 5px;
}

/* Optionally: You can also add a hover effect on the label */
#material-options label:hover {
    cursor: pointer; /* Make it clear it's clickable */
}

/* Adjust spacing between images if needed */
#material-options label {
    margin-right: 20px; /* Increase space between options */
}

/* Ensure the material options fit in the container */
#material-options {
    overflow: hidden; /* Prevent any overflow issues */
    white-space: nowrap; /* Keep all options on one line */
}