/* Features Section 1 - Tailwind Responsive Styles */

.features-section-1 {
  @apply bg-white pt-20 pb-20;
}

/* Mobile section padding */
@media (max-width: 768px) {
  .features-section-1 {
    @apply pt-10 pb-10;
  }
}

/* Extra small mobile */
@media (max-width: 480px) {
  .features-section-1 {
    @apply pt-8 pb-8;
  }
}

.features-section-1 .features-container {
  @apply max-w-screen-xl mx-auto px-6 flex flex-col gap-12;
}

/* Mobile container */
@media (max-width: 768px) {
  .features-section-1 .features-container {
    @apply px-4 gap-8;
  }
}

/* Extra small mobile */
@media (max-width: 480px) {
  .features-section-1 .features-container {
    @apply px-3 gap-6;
  }
}

.text-wrapper-container {
  @apply p-4 mb-0;
}

/* Mobile text wrapper */
@media (max-width: 768px) {
  .text-wrapper-container {
    @apply p-4 mb-0;
  }
}

.text-elements-container {
  @apply grid grid-cols-1 lg:grid-cols-2 gap-8 items-center;
}

/* Mobile text elements */
@media (max-width: 768px) {
  .text-elements-container {
    @apply grid-cols-1 gap-5 text-center;
  }
}

.cards-wrapper-container {
  @apply p-4;
}

/* Mobile cards wrapper */
@media (max-width: 768px) {
  .cards-wrapper-container {
    @apply p-4;
  }
}

.features-heading {
  @apply font-fira font-semibold text-5xl leading-tight text-rafinera-dark;
  letter-spacing: -0.01em;
}

/* Mobile heading */
@media (max-width: 768px) {
  .features-heading {
    @apply text-[34px] text-center;
  }
}

/* Extra small mobile */
@media (max-width: 480px) {
  .features-heading {
    @apply text-[30px];
  }
}

.features-subheading {
  @apply font-fira font-normal text-xl leading-relaxed text-rafinera-gray;
}

/* Mobile subheading */
@media (max-width: 768px) {
  .features-subheading {
    @apply text-lg text-center;
  }
}

/* Extra small mobile */
@media (max-width: 480px) {
  .features-subheading {
    @apply text-base;
  }
}

/* Product Cards Container */
.product-cards-container {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 justify-center items-center max-w-screen-lg mx-auto;
}

/* Mobile product cards */
@media (max-width: 768px) {
  .product-cards-container {
    @apply grid-cols-1 gap-5;
  }
}

.product-frame {
  @apply w-full max-w-sm mx-auto;
}

.product-card {
  @apply relative w-full bg-white rounded-3xl shadow-lg transition-all duration-300 ease-in-out overflow-hidden cursor-pointer h-[400px];
  padding: 20px;
}

.product-card:hover {
  @apply transform -translate-y-1 shadow-lg;
}

/* Mobile product card */
@media (max-width: 768px) {
  .product-card {
    @apply p-4 mx-auto;
    width: 320px;
    height: 340px;
  }
}

/* Extra small mobile */
@media (max-width: 480px) {
  .product-card {
    @apply p-3.5 mx-auto;
    width: 300px;
    height: 320px;
  }
}

/* Disable hover effects on touch devices */
@media (hover: none) {
  .product-card:hover {
    @apply transform-none shadow-lg;
  }
}

.product-image {
  @apply absolute bottom-0 right-0 w-48 h-48 object-contain transition-transform duration-300 ease-in-out;
}

/* Mobile product image */
@media (max-width: 768px) {
  .product-image {
    width: 160px !important;
    height: 160px !important;
    bottom: 0;
    right: 0;
  }
}

/* Extra small mobile */
@media (max-width: 480px) {
  .product-image {
    width: 140px !important;
    height: 140px !important;
  }
}

/* Specific product images - Desktop */
.product-card .classic-image,
.product-card .protein-image {
    width: 280px !important;
    height: 280px !important;
}

.juice-image {
  @apply w-60 h-60;
}

/* Mobile specific images */
@media (max-width: 768px) {
.product-card .classic-image,
    .product-card .protein-image {
        width: 280px !important;
        height: 280px !important;
        bottom: 0;
        right: 0;
    }
  
  .juice-image {
    @apply w-60 h-60 bottom-0 right-0;
  }
}

/* Extra small mobile */
@media (max-width: 480px) {
  .product-card .classic-image,
    .product-card .protein-image {
        width: 220px !important;
        height: 220px !important;
    }
  
  .juice-image {
    @apply w-[200px] h-[200px];
  }
}

.product-name {
  @apply absolute top-5 left-5 font-fira font-semibold text-3xl leading-tight text-rafinera-dark z-10;
}

/* Mobile product name */
@media (max-width: 768px) {
  .product-name {
    @apply text-2xl top-4 left-5;
  }
}

/* Extra small mobile */
@media (max-width: 480px) {
  .product-name {
    @apply text-[22px] top-3 left-4;
  }
}

.product-price-container {
  @apply absolute bottom-6 left-6 z-10;
}

/* Mobile price container */
@media (max-width: 768px) {
  .product-price-container {
    @apply bottom-5 left-5;
  }
}

/* Extra small mobile */
@media (max-width: 480px) {
  .product-price-container {
    @apply bottom-4 left-4;
  }
}

.product-price {
  @apply font-fira font-bold text-2xl leading-tight text-rafinera-dark;
}

/* Mobile price */
@media (max-width: 768px) {
  .product-price {
    @apply text-lg;
  }
}

/* Extra small mobile */
@media (max-width: 480px) {
  .product-price {
    @apply text-base;
  }
}

.product-price-detail {
  @apply font-fira font-normal text-sm leading-tight text-rafinera-gray;
}

/* Mobile price detail */
@media (max-width: 768px) {
  .product-price-detail {
    @apply text-xs;
  }
}

/* Extra small mobile */
@media (max-width: 480px) {
  .product-price-detail {
    @apply text-[11px];
  }
}

.product-description {
  @apply font-fira font-normal text-[15px] leading-relaxed text-rafinera-gray m-0 text-left;
}

/* Mobile description */
@media (max-width: 768px) {
  .product-description {
    @apply text-sm;
  }
}

/* Extra small mobile */
@media (max-width: 480px) {
  .product-description {
    @apply text-[13px];
  }
}

/* Tablet styles (769px - 992px) */
@media (min-width: 769px) and (max-width: 992px) {
  .features-section-1 {
    @apply pt-[60px] pb-[60px];
  }
  
  .features-section-1 .features-container {
    @apply px-[18px] gap-[30px];
  }
  
  .product-cards-container {
    @apply grid-cols-2 gap-5 max-w-[1000px];
  }
  
  .product-card {
    @apply h-[360px] p-[18px];
  }
  
  .product-image {
    @apply w-[220px] h-[220px];
  }
  
  .classic-image,
  .protein-image,
  .juice-image {
    @apply w-[260px] h-[260px];
  }
  
  .features-heading {
    @apply text-4xl;
  }
  
  .features-subheading {
    @apply text-lg;
  }
  
  .product-name {
    @apply text-[30px];
  }
  
  .product-price {
    @apply text-xl;
  }
  
  .product-description {
    @apply text-base;
  }
}

/* Special layouts for package pages */
.product-cards-container.classic-page-cards {
  @apply grid-cols-2 max-w-screen-xl gap-8;
}

.product-cards-container.classic-page-cards .product-frame {
  @apply w-full max-w-none;
}

.product-cards-container.classic-page-cards .product-card {
  @apply w-full h-[420px] p-6;
}

.product-cards-container.classic-page-cards .product-image {
  @apply w-[280px] h-[280px] bottom-0 right-0;
}

.product-cards-container.classic-page-cards .classic-image,
.product-cards-container.classic-page-cards .protein-image,
.product-cards-container.classic-page-cards .juice-image {
  @apply w-[320px] h-[320px] bottom-0 right-0;
}

.product-cards-container.classic-page-cards .product-name {
  @apply text-3xl top-6 left-6;
}

.product-cards-container.classic-page-cards .product-price-container {
  @apply bottom-8 left-8;
}

.product-cards-container.classic-page-cards .product-price {
  @apply text-2xl;
}

.product-cards-container.classic-page-cards .product-description {
  @apply text-[17px];
}

/* Mobile adaptations for package pages */
@media (max-width: 768px) {
  .product-cards-container.classic-page-cards {
    @apply grid-cols-1 max-w-[400px] gap-5;
  }
  
  .product-cards-container.classic-page-cards .product-frame {
    @apply w-full max-w-none;
  }
  
  .product-cards-container.classic-page-cards .product-card {
    @apply w-full h-[380px] p-5;
  }
  
  .product-cards-container.classic-page-cards .product-image {
    @apply w-60 h-60 bottom-0 right-0;
  }
  
  .product-cards-container.classic-page-cards .classic-image,
  .product-cards-container.classic-page-cards .protein-image,
  .product-cards-container.classic-page-cards .juice-image {
    @apply w-60 h-60 bottom-0 right-0;
  }
  
  .product-cards-container.classic-page-cards .product-name {
    @apply text-2xl top-5 left-5;
  }
  
  .product-cards-container.classic-page-cards .product-price-container {
    @apply bottom-[25px] left-[25px];
  }
  
  .product-cards-container.classic-page-cards .product-price {
    @apply text-xl;
  }
  
  .product-cards-container.classic-page-cards .product-description {
    @apply text-[15px];
  }
}

/* Protein Plus Package Page responsive */
@media (max-width: 768px) {
  .product-cards-container.protein-page-cards {
    @apply grid-cols-1 max-w-[400px] gap-5;
  }
  
  .product-cards-container.protein-page-cards .product-frame {
    @apply w-full max-w-none;
  }
  
  .product-cards-container.protein-page-cards .product-card {
    @apply w-full h-[380px] p-5;
  }
}