/*
Theme Name: Jacobs Coffee Machines
Theme URI: https://example.com/jacobs-coffee-machines
Author: Your Name
Author URI: https://yourwebsite.com
Description: A premium coffee machine theme for Jacobs.
Version: 1.0
Requires at least: 5.0
Tested up to: 6.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jacobs-coffee
*/

/* Custom CSS rules for Jacobs Coffee Machines theme */

/* Global Transitions for elements with product-card class */
.product-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card:hover {
    transform: translateY(-8px);
}

/* Hero Section Gradient - from original index.html */
.hero-gradient {
    background: linear-gradient(135deg, #01291B 0%, #023d29 100%);
}

/* Gold Gradient for buttons and specific elements */
.gold-gradient {
    background: linear-gradient(135deg, #D3AA5C 0%, #e6c478 100%);
}

/* Product Image Transitions for Single Product Page */
.product-image {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- ADDITIONS/MODIFICATIONS FOR GALLERY ANIMATION --- */

/* Ensure the image itself transitions opacity smoothly */
.product-image img {
    /* Adding an explicit transition for opacity for direct control */
    transition: opacity 0.15s ease-in-out; /* This should match the setTimeout in JS for fade-out */
}

/* Fade-in Animation for Images (already present, ensuring it works as expected) */
.fade-in {
    opacity: 0; /* Start invisible for the animation */
    animation: fadeIn 0.3s ease-out forwards; /* Adjusted duration for quick fade-in */
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* New: Fade-out Animation for Images */
.fade-out {
    opacity: 1; /* Start visible */
    animation: fadeOut 0.15s ease-out forwards; /* This duration should match the setTimeout in JS for fade-out */
}
@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-20px); } /* Optional: subtle movement during fade-out */
}

/* --- END ADDITIONS/MODIFICATIONS FOR GALLERY ANIMATION --- */


/* Thumbnail Gallery Styles for Single Product Page */
.thumbnail {
    transition: all 0.3s ease;
    cursor: pointer;
}
.thumbnail:hover {
    transform: scale(1.05);
}
.thumbnail.active {
    border-color: #D3AA5C !important; /* Apply Jacobs Gold for active state. Added !important to ensure override. */
    transform: scale(1.05);
}

/* Luxury Button Styles */
.btn-luxury {
    background: linear-gradient(135deg, #D3AA5C 0%, #e6c478 50%, #D3AA5C 100%);
    box-shadow: 0 8px 32px rgba(211, 170, 92, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-luxury:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(211, 170, 92, 0.4);
    background: linear-gradient(135deg, #e6c478 0%, #D3AA5C 50%, #e6c478 100%);
}

/* --- NEW ADDITIONS/MODIFICATIONS FOR MAIN IMAGE FIT --- */

/* This rule ensures the inner image container flex properties align content */
#mainImage {
    /* Tailwind's w-full h-full flex items-center justify-center should generally work.
       Ensure nothing is overriding them. */
    box-sizing: border-box; /* Standardize box model */
    padding: 0; /* Ensure no unintended padding is pushing content out */
}

/* This is the key part for the image itself */
#mainImage img {
    display: block;      /* Ensure it's a block-level element */
    max-width: 100%;     /* Ensure it doesn't overflow its container horizontally */
    max-height: 100%;    /* Ensure it doesn't overflow its container vertically */
    width: auto;         /* Allow width to adjust based on aspect ratio */
    height: auto;        /* Allow height to adjust based on aspect ratio */
    object-fit: contain; /* Keep the image fully visible, preserving its aspect ratio */
    margin: auto;        /* Center the image within #mainImage */
    flex-shrink: 0;      /* Prevent image from shrinking smaller than content needs if flex container */
    flex-grow: 0;        /* Prevent image from growing larger than content needs if flex container */
}

/* If the 'aspect-square' on product-image-wrapper is still causing issues for non-square images: */
/* Option A: Keep aspect-square but allow outer padding to shrink if needed (less common)
.product-image-wrapper {
    padding: 0 !important;
    position: relative;
    padding-bottom: 100%; // Aspect ratio hack for square
    height: 0; // Essential for padding-bottom hack
}
#mainImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
*/

/* Option B: (Recommended for flexible image sizes) Adjust the wrapper if images are often not square.
   Consider removing 'aspect-square' from 'product-image-wrapper' in your HTML
   and instead defining a maximum height for the wrapper if needed.
   e.g., <div class="bg-white rounded-2xl shadow-2xl p-8 border border-gray-100 product-image-wrapper max-h-[500px]">
*/

/* --- END NEW ADDITIONS/MODIFICATIONS FOR MAIN IMAGE FIT --- */