/* 1. Register the Light Font */
@font-face {
    font-family: 'Century Gothic Light';
    src: url('font/CenturyGothicPaneuropean-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/*
 Theme Name:   Minimalio Child
 Template:     minimalio
*/

/* 1. Force Title Visibility */
.single-product h1.product_title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    font-size: 32px !important;
    line-height: 1.2 !important;
    color: #000 !important;
}

/* 2. Create the "Lite Space" for the zoom icon */
.woocommerce-product-gallery__trigger {
    top: 15px !important; 
    right: 15px !important;
}

/* 3. Space between main image and thumbnails */
.flex-control-nav.flex-control-thumbs {
    margin-top: 20px !important;
}

/* 4. Ensure the price doesn't hug the title too closely */
.single-product p.price {
    margin-top: 10px !important;
    margin-bottom: 25px !important;
}

/* 2. Apply Century Gothic Light to the Titles */
h1, h2, h3, .product_title, .entry-title {
    font-family: 'Century Gothic Light', sans-serif !important;
    font-weight: 300 !important;
    letter-spacing: 0.04em !important;
    text-transform: none;
}
/* Force 3:2 Aspect Ratio on Shop Thumbnails */

/* 1. FORCE 3:2 ONLY ON MAIN PRODUCT GALLERY SLIDER */
.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery .flex-viewport img {
    aspect-ratio: 3 / 2 !important;
    height: auto !important;
    object-fit: cover !important;
}

/* 2. FORCE 3:2 ON THE MAIN THUMBNAIL TRACK (the small dots/images below main) */
.single-product .flex-control-thumbs img {
    aspect-ratio: 3 / 2 !important;
    object-fit: cover !important;
    opacity: 1 !important; /* Keeps them bright */
}

/* 3. SAFETY RESET: Ensure Related/Sidebar/Grid products stay square or original */
.products .product img, 
.related.products img, 
.upsells.products img,
.widget_products img {
    aspect-ratio: 3/2 !important; /* Or change to unset if you want natural size */
    height: auto !important;
    object-fit: contain !important;
}