/**
 * VKalk Vollbreite Layout CSS
 * Versteckt Standard-Magento-Elemente und optimiert für Vue App
 * Updated: 2025-08-08 13:30 - Version 1.1
 */

/* Verstecke Standard-Magento-Produktelemente für VKalk-Produkte */
body.catalog-product-view.vkalk-product .product-info-main,
body.catalog-product-view.vkalk-product .product.media,
body.catalog-product-view.vkalk-product .product-info-price,
body.catalog-product-view.vkalk-product .product-add-form,
body.catalog-product-view.vkalk-product .product-info-stock-sku,
body.catalog-product-view.vkalk-product .product.info.detailed,
body.catalog-product-view.vkalk-product .block.related,
body.catalog-product-view.vkalk-product .block.upsell,
body.catalog-product-view.vkalk-product .product-social-links,
body.catalog-product-view.vkalk-product .product-reviews-summary,
body.catalog-product-view.vkalk-product .product-options-wrapper {
  display: none !important;
}

/* Container-Anpassungen für Vollbreite */
body.catalog-product-view.vkalk-product .page-main {
  padding: 0 !important;
  max-width: none !important;
}

body.catalog-product-view.vkalk-product .columns {
  margin: 0 !important;
  max-width: none !important;
}

body.catalog-product-view.vkalk-product .column.main {
  width: 100% !important;
  padding: 0 !important;
}

/* Breadcrumbs anpassen */
body.catalog-product-view.vkalk-product .breadcrumbs {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
}

/* Header-Navigation beibehalten */
body.catalog-product-view.vkalk-product .page-header,
body.catalog-product-view.vkalk-product .header.content,
body.catalog-product-view.vkalk-product .nav-sections {
  display: block !important;
}

/* Footer beibehalten */
body.catalog-product-view.vkalk-product .page-footer {
  display: block !important;
}

/* VKalk Container Vollbreite */
#vkalk-fullwidth-wrapper {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  position: relative;
  overflow-x: hidden;
}

/* VKalk spezifische Responsive Anpassungen */
@media (max-width: 1200px) {
  #vkalk-container > div {
    max-width: 100% !important;
    padding: 20px !important;
  }
}

@media (max-width: 768px) {
  #vkalk-product-header {
    padding: 15px !important;
  }

  #vkalk-product-header h1 {
    font-size: 22px !important;
  }

  #vkalk-container {
    min-height: 600px !important;
  }

  #vkalk-container h2 {
    font-size: 26px !important;
  }

  #vkalk-app-mount {
    min-height: 500px !important;
    margin: 0 10px !important;
  }

  /* Verstecke Produktinfo-Tags auf Mobile */
  #vkalk-container .product-info-tags {
    display: none !important;
  }
}

@media (max-width: 480px) {
  #vkalk-fullwidth-wrapper {
    margin-left: calc(-50vw + 50% + 10px);
    margin-right: calc(-50vw + 50% + 10px);
  }

  #vkalk-product-header {
    padding: 10px !important;
  }

  #vkalk-container > div {
    padding: 15px 10px !important;
  }

  #vkalk-app-mount {
    border-radius: 8px !important;
    min-height: 400px !important;
  }
}

/* Magento Layout-Fixes */
body.catalog-product-view.vkalk-product .page-wrapper {
  overflow-x: hidden;
}

/* Entferne Standard-Spacing */
body.catalog-product-view.vkalk-product .product-info-main .page-title-wrapper {
  display: none !important;
}

#vkalk-container .btn:active,
#vkalk-container button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(40, 167, 69, 0.4);
}

/* Spezielle Anpassungen für Vue App Content */
#vkalk-app-mount .vue-app-content {
  width: 100% !important;
  max-width: none !important;
}

/* Loading-Animation Verbesserung */
@keyframes vkalk-pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

#vkalk-loading {
  animation: vkalk-pulse 2s ease-in-out infinite;
}

/* Erfolgs- und Fehler-Meldungen */
.vkalk-success {
  background: linear-gradient(45deg, #28a745, #20c997);
  color: white;
  padding: 15px 20px;
  border-radius: 8px;
  margin: 15px 0;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.vkalk-error {
  background: linear-gradient(45deg, #dc3545, #c82333);
  color: white;
  padding: 15px 20px;
  border-radius: 8px;
  margin: 15px 0;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* Print-Anpassungen */
@media print {
  #vkalk-fullwidth-wrapper {
    width: 100% !important;
    margin: 0 !important;
  }

  #vkalk-container {
    background: white !important;
    box-shadow: none !important;
    border: 1px solid #dee2e6 !important;
  }

  #vkalk-loading,
  #vkalk-error {
    display: none !important;
  }
}

/* Browser Cache Buster - 2025-08-08-13:30 */
body.catalog-product-view.vkalk-product:after {
  content: 'VKalk CSS v1.1 - 2025-08-08';
  display: none;
}