/* ===================================
   PRODUCT.HTML RESPONSIVE IMPROVEMENTS
   =================================== */

/* ===================================
   NAVBAR SPACING FIXES
   =================================== */

/* Fix navbar overlap issues on mobile */
@media (max-width: 768px) {
  .apple-product-hero {
    margin-top: 100px !important;
    padding-top: 20px !important;
  }
  
  /* Ensure proper spacing from navbar */
  body {
    padding-top: 0 !important;
  }
  
  /* Fix sticky positioning issues */
  .apple-product-hero-images,
  .apple-product-hero-infos {
    position: static !important;
    top: auto !important;
    height: auto !important;
    min-height: auto !important;
  }
}

@media (max-width: 480px) {
  .apple-product-hero {
    margin-top: 120px !important;
    padding-top: 15px !important;
  }
}

@media (max-width: 360px) {
  .apple-product-hero {
    margin-top: 140px !important;
    padding-top: 10px !important;
  }
}

/* ===================================
   HERO SECTION MOBILE OPTIMIZATION
   =================================== */

/* Improve hero section layout on mobile */
@media (max-width: 768px) {
  .apple-product-hero-inner {
    flex-direction: column !important;
    gap: 2rem !important;
    padding: 1.5rem 1rem !important;
    min-height: auto !important;
  }
  
  .apple-product-hero-images {
    order: 1 !important;
    width: 100% !important;
    flex: none !important;
    margin-bottom: 1rem !important;
  }
  
  .apple-product-hero-infos {
    order: 2 !important;
    width: 100% !important;
    flex: none !important;
    position: static !important;
    top: auto !important;
    height: auto !important;
    min-height: auto !important;
  }
  
  .apple-product-hero-content {
    align-items: center !important;
    text-align: center !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
}

/* ===================================
   IMAGE CAROUSEL MOBILE OPTIMIZATION
   =================================== */

/* Fix image cropping and display on mobile */
@media (max-width: 768px) {
  .apple-carousel {
    max-width: 100% !important;
    width: 100% !important;
    aspect-ratio: 4/3 !important;
    min-height: 250px !important;
    margin: 0 auto !important;
  }
  
  .apple-carousel-img {
    object-fit: cover !important;
    object-position: center !important;
  }
  
  /* Improve carousel arrows on mobile */
  .apple-carousel-arrow {
    width: 40px !important;
    height: 40px !important;
    right: 0.5rem !important;
  }
  
  .apple-carousel-arrow svg {
    width: 20px !important;
    height: 20px !important;
  }
}

@media (max-width: 480px) {
  .apple-carousel {
    aspect-ratio: 1/1 !important;
    min-height: 200px !important;
    border-radius: 1rem !important;
  }
  
  .apple-carousel-arrow {
    width: 36px !important;
    height: 36px !important;
    right: 0.3rem !important;
  }
  
  .apple-carousel-arrow svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* Additional image optimizations for very small screens */
@media (max-width: 360px) {
  .apple-carousel {
    aspect-ratio: 1/1 !important;
    min-height: 180px !important;
    border-radius: 0.8rem !important;
  }
  
  .apple-carousel-arrow {
    width: 32px !important;
    height: 32px !important;
    right: 0.2rem !important;
  }
  
  .apple-carousel-arrow svg {
    width: 16px !important;
    height: 16px !important;
  }
  
  .apple-carousel-progress {
    width: 50% !important;
    height: 3px !important;
    bottom: 0.8rem !important;
  }
}

/* Optimize image loading and display */
.apple-carousel-img {
  will-change: opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Improve image quality on high DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .apple-carousel-img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
  }
}

/* ===================================
   TYPOGRAPHY MOBILE OPTIMIZATION
   =================================== */

/* Improve text readability on mobile */
@media (max-width: 768px) {
  .apple-product-title {
    font-size: 2.2rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0.5rem !important;
  }
  
  .apple-product-subtitle {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1rem !important;
  }
  
  .apple-product-price {
    font-size: 1.8rem !important;
  }
  
  .apple-product-price-vat {
    font-size: 1rem !important;
  }
}

@media (max-width: 480px) {
  .apple-product-title {
    font-size: 1.8rem !important;
    line-height: 1.05 !important;
  }
  
  .apple-product-subtitle {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }
  
  .apple-product-price {
    font-size: 1.6rem !important;
  }
  
  .apple-product-price-vat {
    font-size: 0.9rem !important;
  }
}

/* ===================================
   BUTTON MOBILE OPTIMIZATION
   =================================== */

/* Ensure price and button are always centered on non-desktop devices */
@media (max-width: 1024px) {
  .apple-product-price-row {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .apple-product-price {
    text-align: center !important;
    margin: 0 !important;
  }
  
  .apple-buy-btn {
    margin: 0 auto !important;
  }
}

/* Mobile specific optimizations */
@media (max-width: 768px) {
  .apple-product-price-row {
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .apple-buy-btn {
    width: 100% !important;
    max-width: 280px !important;
    padding: 0.8rem 1.5rem !important;
    font-size: 1rem !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 480px) {
  .apple-buy-btn {
    max-width: 100% !important;
    padding: 0.7rem 1.2rem !important;
    font-size: 0.95rem !important;
  }
}

/* ===================================
   BENEFITS SECTION MOBILE OPTIMIZATION
   =================================== */

/* Improve benefits display on mobile */
@media (max-width: 768px) {
  .apple-product-benefits {
    gap: 0.7rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .apple-product-benefits li {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    justify-content: flex-start !important;
  }
  
  .apple-benefit-icon {
    font-size: 1.1em !important;
    margin-right: 0.5em !important;
  }
}

@media (max-width: 480px) {
  .apple-product-benefits {
    gap: 0.6rem !important;
    margin-bottom: 1.2rem !important;
  }
  
  .apple-product-benefits li {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
  }
}

/* ===================================
   INTERMEDIATE SCREEN OPTIMIZATION (TABLETS)
   =================================== */

/* Optimize for tablet screens (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .apple-product-hero {
    margin: 2rem 1rem !important;
    padding-top: 80px !important;
  }
  
  .apple-product-hero-inner {
    flex-direction: column !important;
    gap: 3rem !important;
    padding: 2rem 1.5rem !important;
    max-width: 100% !important;
  }
  
  .apple-product-hero-images {
    position: static !important;
    height: auto !important;
    min-height: auto !important;
    width: 100% !important;
    flex: none !important;
    order: 1 !important;
  }
  
  .apple-product-hero-infos {
    position: static !important;
    width: 100% !important;
    flex: none !important;
    order: 2 !important;
  }
  
  .apple-product-hero-content {
    align-items: center !important;
    text-align: center !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  
  .apple-carousel {
    max-width: 80vw !important;
    aspect-ratio: 16/10 !important;
    margin: 0 auto !important;
  }
  
  .apple-product-title {
    font-size: 2.8rem !important;
  }
  
  .apple-product-subtitle {
    font-size: 1.3rem !important;
  }
  
  .apple-product-price-row {
    justify-content: center !important;
    align-items: center !important;
    gap: 1.5rem !important;
    text-align: center !important;
    width: 100% !important;
  }
  
  .apple-product-price {
    text-align: center !important;
    margin: 0 !important;
  }
  
  .apple-buy-btn {
    width: auto !important;
    max-width: 200px !important;
    margin: 0 auto !important;
  }
}

/* Additional improvements for medium tablets (900px - 1024px) */
@media (min-width: 900px) and (max-width: 1024px) {
  .apple-product-hero {
    margin: 2.5rem 1.5rem !important;
    padding-top: 90px !important;
  }
  
  .apple-product-hero-inner {
    gap: 3.5rem !important;
    padding: 2.5rem 2rem !important;
  }
  
  .apple-carousel {
    max-width: 75vw !important;
    aspect-ratio: 16/9 !important;
  }
  
  .apple-product-title {
    font-size: 3rem !important;
  }
  
  .apple-product-subtitle {
    font-size: 1.4rem !important;
  }
}

/* Optimize for smaller tablets (768px - 900px) */
@media (min-width: 768px) and (max-width: 900px) {
  .apple-product-hero {
    margin: 1.5rem 0.8rem !important;
    padding-top: 100px !important;
  }
  
  .apple-product-hero-inner {
    gap: 2.5rem !important;
    padding: 1.8rem 1.2rem !important;
  }
  
  .apple-carousel {
    max-width: 85vw !important;
    aspect-ratio: 4/3 !important;
  }
  
  .apple-product-title {
    font-size: 2.6rem !important;
  }
  
  .apple-product-subtitle {
    font-size: 1.2rem !important;
  }
}

/* ===================================
   LANDSCAPE MOBILE OPTIMIZATION
   =================================== */

/* Optimize for landscape mobile orientation */
@media (max-width: 768px) and (orientation: landscape) {
  .apple-product-hero {
    margin-top: 80px !important;
    padding-top: 10px !important;
  }
  
  .apple-product-hero-inner {
    min-height: auto !important;
    padding: 1rem 0.5rem !important;
    gap: 1.5rem !important;
  }
  
  .apple-product-hero-images {
    height: auto !important;
    min-height: 200px !important;
  }
  
  .apple-carousel {
    aspect-ratio: 16/9 !important;
    min-height: 180px !important;
  }
  
  .apple-product-title {
    font-size: 1.8rem !important;
  }
  
  .apple-product-subtitle {
    font-size: 1rem !important;
  }
}

/* ===================================
   TOUCH DEVICE OPTIMIZATIONS
   =================================== */

/* Improve touch interactions on mobile */
@media (hover: none) and (pointer: coarse) {
  .apple-carousel-arrow {
    min-width: 48px !important;
    min-height: 48px !important;
  }
  
  .apple-buy-btn {
    min-height: 48px !important;
    padding: 0.8rem 1.5rem !important;
  }
  
  .apple-carousel-progress {
    height: 6px !important;
  }
}

/* ===================================
   HIGH DPI DISPLAY OPTIMIZATION
   =================================== */

/* Ensure crisp images on retina displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .apple-carousel-img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ===================================
   ACCESSIBILITY IMPROVEMENTS
   =================================== */

/* Improve accessibility on mobile */
@media (max-width: 768px) {
  .apple-carousel-arrow {
    background: rgba(0,0,0,0.6) !important;
  }
  
  .apple-carousel-arrow:hover,
  .apple-carousel-arrow:focus {
    background: rgba(0,0,0,0.8) !important;
    transform: translateY(-50%) scale(1.1) !important;
  }
  
  .apple-buy-btn:focus {
    outline: 2px solid #0099FF !important;
    outline-offset: 2px !important;
  }
}

/* ===================================
   PERFORMANCE OPTIMIZATIONS
   =================================== */

/* Optimize animations for mobile */
@media (max-width: 768px) {
  .apple-product-hero-images,
  .apple-product-hero-infos {
    transition: opacity 0.5s ease, transform 0.5s ease !important;
  }
  
  .apple-carousel-img {
    transition: opacity 0.4s ease !important;
  }
}

/* ===================================
   EXTRA SMALL SCREENS OPTIMIZATION
   =================================== */

/* Optimize for very small screens (320px - 360px) */
@media (max-width: 360px) {
  .apple-product-hero {
    margin: 0.1rem !important;
    padding-top: 15px !important;
    border-radius: 0.8rem !important;
  }
  
  .apple-product-hero-inner {
    padding: 0.6rem 0.1rem !important;
    gap: 0.8rem !important;
  }
  
  .apple-product-title {
    font-size: 1.6rem !important;
    line-height: 1.05 !important;
  }
  
  .apple-product-subtitle {
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
  }
  
  .apple-product-price {
    font-size: 1.4rem !important;
  }
  
  .apple-product-price-vat {
    font-size: 0.8rem !important;
  }
  
  .apple-product-price-row {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    gap: 0.8rem !important;
  }
  
  .apple-product-price {
    text-align: center !important;
    margin: 0 !important;
  }
  
  .apple-buy-btn {
    padding: 0.6rem 1rem !important;
    font-size: 0.9rem !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .apple-product-benefits li {
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
  }
  
  .apple-benefit-icon {
    font-size: 1em !important;
  }
}

/* ===================================
   LARGE MOBILE DEVICES OPTIMIZATION
   =================================== */

/* Optimize for large mobile devices (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .apple-product-hero {
    margin: 0.5rem !important;
    padding-top: 20px !important;
  }
  
  .apple-product-hero-inner {
    padding: 1.2rem 0.8rem !important;
    gap: 1.8rem !important;
  }
  
  .apple-product-title {
    font-size: 2.4rem !important;
  }
  
  .apple-product-subtitle {
    font-size: 1.15rem !important;
  }
  
  .apple-carousel {
    aspect-ratio: 4/3 !important;
    min-height: 280px !important;
  }
  
  .apple-product-price-row {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    gap: 1.2rem !important;
  }
  
  .apple-product-price {
    text-align: center !important;
    margin: 0 !important;
  }
  
  .apple-buy-btn {
    margin: 0 auto !important;
    width: auto !important;
    max-width: 250px !important;
  }
}

/* ===================================
   BREAKPOINT OPTIMIZATIONS
   =================================== */

/* Smooth transitions between breakpoints */
@media (min-width: 481px) and (max-width: 600px) {
  .apple-product-hero {
    margin: 0.3rem !important;
    padding-top: 18px !important;
  }
  
  .apple-product-title {
    font-size: 2.1rem !important;
  }
  
  .apple-product-subtitle {
    font-size: 1.05rem !important;
  }
  
  .apple-product-price-row {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    gap: 1rem !important;
  }
  
  .apple-product-price {
    text-align: center !important;
    margin: 0 !important;
  }
  
  .apple-buy-btn {
    margin: 0 auto !important;
    width: auto !important;
    max-width: 220px !important;
  }
}

@media (min-width: 601px) and (max-width: 700px) {
  .apple-product-hero {
    margin: 0.4rem !important;
    padding-top: 16px !important;
  }
  
  .apple-product-title {
    font-size: 2.3rem !important;
  }
  
  .apple-product-subtitle {
    font-size: 1.1rem !important;
  }
  
  .apple-product-price-row {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    gap: 1.1rem !important;
  }
  
  .apple-product-price {
    text-align: center !important;
    margin: 0 !important;
  }
  
  .apple-buy-btn {
    margin: 0 auto !important;
    width: auto !important;
    max-width: 230px !important;
  }
}

@media (min-width: 701px) and (max-width: 768px) {
  .apple-product-hero {
    margin: 0.5rem !important;
    padding-top: 14px !important;
  }
  
  .apple-product-title {
    font-size: 2.5rem !important;
  }
  
  .apple-product-subtitle {
    font-size: 1.2rem !important;
  }
  
  .apple-product-price-row {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    gap: 1.2rem !important;
  }
  
  .apple-product-price {
    text-align: center !important;
    margin: 0 !important;
  }
  
  .apple-buy-btn {
    margin: 0 auto !important;
    width: auto !important;
    max-width: 240px !important;
  }
}

/* ===================================
   GUARANTEES SECTION - DESKTOP ONLY
   =================================== */

/* Hide guarantees section on mobile and tablet */
@media (max-width: 1024px) {
  .product-guarantees {
    display: none !important;
  }
}

/* ===================================
   PRINT STYLES
   =================================== */

@media print {
  .apple-product-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
  
  .apple-carousel-arrow,
  .apple-carousel-progress {
    display: none !important;
  }
  
  .apple-buy-btn {
    display: none !important;
  }
  
  .product-guarantees {
    display: none !important;
  }
}