/* Custom styles for elements not easily handled by Tailwind utilities alone */
body {
    background-color: #0a0a0a;
    color: #f3f4f6; /* Gray-100 */
}

.heading-skew {
    transform: skewX(-10deg);
}

/* Rotator Animation Styles */
.rotator-slide {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.rotator-slide.active {
    opacity: 1;
    z-index: 10;
}

.rotator-content {
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.5s ease-out 0.3s; /* Delay to appear after image fades in */
}

.rotator-slide.active .rotator-content {
    transform: translateY(0);
    opacity: 1;
}

/* Product Card Hover Effect */
.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(231, 92, 42, 0.2); /* Orange glow */
}

/* Shopify Buy Button overrides to match site theme */
.shopify-buy-frame {
    width: 100%;
}