feat: Added a lot of new section rewrites

2026-05-22 11:22:17 +02:00
parent 8d4ff16d9b
commit fe6682a76a
17 changed files with 839 additions and 3 deletions
@@ -2,3 +2,5 @@


 - Slider changable time in UI
+
+- Fix do košíku button
@@ -0,0 +1,7 @@
+body {
+  padding-top: 0px !important;
+}
+
+html {
+  font-size: unset !important;
+}
@@ -0,0 +1 @@
+main#main #AjaxMainSection .section_guidepost_before
@@ -0,0 +1,44 @@
+(() => {
+  const container = document.querySelector('main#main #AjaxMainSection .section_guidepost_before .vc-articlebox');
+  if (!container) return null;
+
+  const headerEl = container.querySelector('.header span');
+  const sectionTitle = headerEl ? headerEl.textContent.trim() : null;
+
+  const articleNodes = container.querySelectorAll('.content.articles a.article');
+  
+  const articles = Array.from(articleNodes).map(article => {
+    const link = article.getAttribute('href');
+
+    const titleEl = article.querySelector('.title');
+    const title = titleEl ? titleEl.textContent.trim() : null;
+
+    const dateEl = article.querySelector('.date');
+    const date = dateEl ? dateEl.textContent.trim() : null;
+
+    const annotationEl = article.querySelector('.annotation');
+    const annotation = annotationEl ? annotationEl.textContent.trim() : null;
+
+    const imgEl = article.querySelector('.img img');
+    const imageSrc = imgEl ? (imgEl.getAttribute('data-src') || imgEl.getAttribute('src')) : null;
+    const imageAlt = imgEl ? imgEl.getAttribute('alt') : null;
+
+    return {
+      title,
+      link,
+      date,
+      annotation,
+      imageSrc,
+      imageAlt
+    };
+  });
+
+  const moreBtn = container.querySelector('.footer a.moreBtn');
+  const moreLink = moreBtn ? moreBtn.getAttribute('href') : null;
+
+  return {
+    sectionTitle,
+    articles,
+    moreLink
+  };
+})();
@@ -0,0 +1,201 @@
+:root {
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --card: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --border: oklch(0.922 0 0);
+  --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
+}
+
+.news-section {
+  font-family: var(--font-sans);
+  padding: 4rem 0; /* py-16 */
+  background-color: color-mix(
+    in srgb,
+    var(--secondary) 30%,
+    transparent
+  ); /* bg-secondary/30 */
+}
+@media (min-width: 1024px) {
+  .news-section {
+    padding: 6rem 0; /* lg:py-24 */
+  }
+}
+
+.container {
+  max-width: 80rem; /* max-w-7xl */
+  margin: 0 auto;
+  padding: 0 1rem; /* px-4 */
+}
+@media (min-width: 640px) {
+  .container {
+    padding: 0 1.5rem; /* sm:px-6 */
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    padding: 0 2rem; /* lg:px-8 */
+  }
+}
+
+/* Header Section */
+.news-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 3rem; /* mb-12 */
+}
+
+.news-title {
+  font-size: 1.5rem; /* text-2xl */
+  font-weight: 700; /* font-bold */
+  color: var(--foreground);
+  margin: 0;
+}
+@media (min-width: 768px) {
+  .news-title {
+    font-size: 1.875rem; /* md:text-3xl */
+  }
+}
+
+.news-link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1rem;
+  font-weight: 500; /* font-medium */
+  color: var(--accent);
+  text-decoration: none;
+}
+.news-link:hover {
+  text-decoration: underline;
+}
+.news-link svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Grid Layout */
+.news-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.5rem; /* gap-6 */
+}
+@media (min-width: 768px) {
+  .news-grid {
+    grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
+  }
+}
+@media (min-width: 1024px) {
+  .news-grid {
+    gap: 2rem; /* lg:gap-8 */
+  }
+}
+
+/* News Card */
+.news-card {
+  display: flex;
+  flex-direction: column; /* flex-col on mobile */
+  gap: 1rem; /* gap-4 */
+  background-color: var(--card);
+  border-radius: 0.75rem; /* rounded-xl */
+  border: 1px solid var(--border);
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
+  transition: box-shadow 0.3s ease;
+}
+@media (min-width: 640px) {
+  .news-card {
+    flex-direction: row; /* sm:flex-row */
+  }
+}
+.news-card:hover {
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -4px rgba(0, 0, 0, 0.1); /* hover:shadow-lg */
+}
+
+/* Card Image Area */
+.news-img-wrapper {
+  flex-shrink: 0;
+  overflow: hidden;
+  /* Mobile: 16:9 aspect ratio, full width */
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+@media (min-width: 640px) {
+  .news-img-wrapper {
+    /* sm breakpoint: fixed width, 1:1 aspect ratio */
+    width: 12rem; /* sm:w-48 */
+    aspect-ratio: 1 / 1;
+  }
+}
+@media (min-width: 1024px) {
+  .news-img-wrapper {
+    width: 16rem; /* lg:w-64 */
+  }
+}
+
+.news-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+.news-card:hover .news-img {
+  transform: scale(1.05); /* group-hover:scale-105 */
+}
+
+/* Card Content Area */
+.news-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 1rem; /* p-4 */
+}
+@media (min-width: 640px) {
+  .news-content {
+    padding: 1.25rem; /* sm:p-5 */
+  }
+}
+
+.news-date {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem; /* gap-2 */
+  font-size: 0.875rem; /* text-sm */
+  color: var(--muted-foreground);
+  margin-bottom: 0.5rem; /* mb-2 */
+}
+.news-date svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.news-card-title {
+  font-size: 1.125rem; /* text-lg */
+  font-weight: 600; /* font-semibold */
+  color: var(--foreground);
+  margin: 0 0 0.5rem 0; /* mb-2 */
+  line-height: 1.3;
+  transition: color 0.2s ease;
+}
+.news-card:hover .news-card-title {
+  color: var(--accent); /* group-hover:text-accent */
+}
+
+.news-excerpt {
+  font-size: 0.875rem; /* text-sm */
+  color: var(--muted-foreground);
+  margin: 0;
+  line-height: 1.5;
+  /* line-clamp-2 */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
@@ -0,0 +1,57 @@
+<section class="news-section">
+  <div class="container">
+    
+    <!-- Section Header -->
+    <div class="news-header">
+      <h2 class="news-title">
+        {{#if sectionTitle}}{{sectionTitle}}{{else}}Aktuality{{/if}}
+      </h2>
+      {{#if moreLink}}
+        <a href="{{moreLink}}" class="news-link">
+          Více aktualit 
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M5 12h14"></path>
+            <path d="m12 5 7 7-7 7"></path>
+          </svg>
+        </a>
+      {{/if}}
+    </div>
+
+    <!-- Articles Grid -->
+    <div class="news-grid">
+      {{#each articles}}
+        <a href="{{this.link}}" class="news-card">
+          <div class="news-img-wrapper">
+            {{#if this.imageSrc}}
+              <img 
+                src="{{this.imageSrc}}" 
+                alt="{{this.imageAlt}}" 
+                class="news-img" 
+                loading="lazy" 
+              />
+            {{/if}}
+          </div>
+          
+          <div class="news-content">
+            <div class="news-date">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect width="18" height="18" x="3" y="4" rx="2" ry="2"></rect>
+                <line x1="16" x2="16" y1="2" y2="6"></line>
+                <line x1="8" x2="8" y1="2" y2="6"></line>
+                <line x1="3" x2="21" y1="10" y2="10"></line>
+              </svg>
+              <span>{{this.date}}</span>
+            </div>
+            
+            <h3 class="news-card-title">{{this.title}}</h3>
+            
+            {{#if this.annotation}}
+              <p class="news-excerpt">{{this.annotation}}</p>
+            {{/if}}
+          </div>
+        </a>
+      {{/each}}
+    </div>
+
+  </div>
+</section>
@@ -0,0 +1 @@
+main#main #AjaxMainSection .logo_slider
@@ -0,0 +1,9 @@
+(() => {
+  const imageElements = document.querySelectorAll("main#main #AjaxMainSection .logo_slider .owl-stage .item img");
+
+  const images = Array.from(imageElements)
+    .map(img => img.getAttribute('data-src') || img.getAttribute('src'))
+    .filter(path => path !== null);
+
+  return { images };
+})();
@@ -0,0 +1,80 @@
+:root {
+  --card: oklch(1 0 0);
+  --border: oklch(0.922 0 0);
+}
+
+.brands-section {
+  padding: 3rem 0; /* py-12 */
+  background-color: var(--card);
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+}
+@media (min-width: 1024px) {
+  .brands-section {
+    padding: 4rem 0; /* lg:py-16 */
+  }
+}
+
+.brands-container {
+  max-width: 80rem; /* max-w-7xl */
+  margin: 0 auto;
+  padding: 0 1rem; /* px-4 */
+}
+@media (min-width: 640px) {
+  .brands-container {
+    padding: 0 1.5rem; /* sm:px-6 */
+  }
+}
+@media (min-width: 1024px) {
+  .brands-container {
+    padding: 0 2rem; /* lg:px-8 */
+  }
+}
+
+.brands-grid {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem; /* gap-8 */
+}
+@media (min-width: 768px) {
+  .brands-grid {
+    gap: 3rem; /* md:gap-12 */
+  }
+}
+@media (min-width: 1024px) {
+  .brands-grid {
+    gap: 4rem; /* lg:gap-16 */
+  }
+}
+
+.brand-logo {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.brand-logo img {
+  max-height: 2rem; /* Mobile height */
+  width: auto;
+  object-fit: contain;
+  /* Mimic the text-muted-foreground/50 look */
+  opacity: 0.5;
+  filter: grayscale(100%);
+  transition:
+    opacity 0.3s ease,
+    filter 0.3s ease;
+}
+@media (min-width: 768px) {
+  .brand-logo img {
+    max-height: 2.5rem; /* md: height */
+  }
+}
+
+.brand-logo:hover img {
+  /* Mimic hover:text-muted-foreground */
+  opacity: 1;
+  filter: grayscale(0%);
+}
@@ -0,0 +1,11 @@
+<section class="brands-section">
+  <div class="brands-container">
+    <div class="brands-grid">
+      {{#each images}}
+        <div class="brand-logo">
+          <img src="{{this}}" alt="Brand Logo" loading="lazy" />
+        </div>
+      {{/each}}
+    </div>
+  </div>
+</section>
@@ -0,0 +1 @@
+main#main #AjaxMainSection section.section_middle .vc-commodity_attribute
@@ -0,0 +1,85 @@
+(() => {
+  const container = document.querySelector("main#main #AjaxMainSection section.section_middle > .container > .inner > .vc-commodity_attribute");
+
+  if (!container) return null;
+
+  // Extract the section name (e.g., "Novinky")
+  const headerEl = container.querySelector(".header > span");
+  const sectionName = headerEl ? headerEl.textContent.trim() : "Unknown Section";
+
+  // Select all products, ignoring carousel initialization wrappers to ensure we get everything
+  const items = container.querySelectorAll("article.commodityBox");
+  
+  const itemsData = Array.from(items).map((item) => {
+    const productNode = item.querySelector("a.inner");
+    const link = productNode ? productNode.getAttribute("href") : null;
+    
+    // Extract flags and their computed styles
+    const flagsElements = productNode.querySelectorAll(".flags > .flags-inner > .flag");
+    const flags = Array.from(flagsElements).map((flag) => {
+      const styles = window.getComputedStyle(flag);
+      return {
+        text: flag.textContent.trim(),
+        backgroundColor: styles.backgroundColor,
+        textColor: styles.color
+      };
+    });
+
+    // Extract image data
+    const imageEl = productNode.querySelector(".image img.thumb.main");
+    const imageSrc = imageEl ? (imageEl.getAttribute("data-src") || imageEl.getAttribute("src")) : null;
+    const imageAlt = imageEl ? imageEl.getAttribute("alt") : null;
+
+    // Extract description and title
+    const descriptionEl = productNode.querySelector(".annotation > p");
+    const description = descriptionEl ? descriptionEl.textContent.trim() : null;
+
+    const titleEl = productNode.querySelector(".title > span");
+    const title = titleEl ? titleEl.textContent.trim() : null;
+
+    // Extract buy form HTML
+    const buyFormEl = productNode.querySelector(".buyForm");
+    const buyFormContent = buyFormEl ? buyFormEl.innerHTML.trim() : null;
+
+    // Extract pricing details
+    const priceEl = productNode.querySelector(".pricing > .pricing-inner");
+    let priceDiscount = null;
+    let priceBeforeDiscount = null;
+    let priceHighlight = null;
+
+    if (priceEl) {
+      const priceDiscountEl = priceEl.querySelector(".discount .number");
+      priceDiscount = priceDiscountEl ? parseInt(priceDiscountEl.textContent.trim(), 10) : null;
+      
+      const priceBeforeDiscountEl = priceEl.querySelector(".price.beforeDiscount");
+      priceBeforeDiscount = priceBeforeDiscountEl ? priceBeforeDiscountEl.textContent.trim().replace(/\s+/g, ' ') : null;
+
+      const priceHighlightEl = priceEl.querySelector(".price.highlight");
+      priceHighlight = priceHighlightEl ? priceHighlightEl.textContent.trim().replace(/\s+/g, ' ') : null;
+    }
+
+    // Extract availability
+    const availabilityEl = productNode.querySelector(".availability strong");
+    const availability = availabilityEl ? availabilityEl.textContent.trim() : null;
+
+    return {
+      title,
+      link,
+      flags,
+      imageSrc,
+      imageAlt,
+      description,
+      priceHighlight,
+      priceBeforeDiscount,
+      priceDiscount,
+      availability,
+      buyFormContent
+    };
+  });
+
+  // Return a clean object with the section name and its respective items
+  return {
+    section: sectionName,
+    items: itemsData
+  };
+})();
@@ -0,0 +1,262 @@
+:root {
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --card: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --border: oklch(0.922 0 0);
+  --sale-bg: #ef4444; /* Red for discounts */
+  --sale-fg: #ffffff;
+  --success-text: #10b981; /* Green for in-stock */
+  --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
+}
+
+.new-products-section {
+  font-family: var(--font-sans);
+  padding: 4rem 0; /* py-16 */
+  background-color: var(--background);
+}
+@media (min-width: 1024px) {
+  .new-products-section {
+    padding: 6rem 0; /* lg:py-24 */
+  }
+}
+
+.container {
+  max-width: 80rem; /* max-w-7xl */
+  margin: 0 auto;
+  padding: 0 1rem; /* px-4 */
+}
+@media (min-width: 640px) {
+  .container {
+    padding: 0 1.5rem; /* sm:px-6 */
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    padding: 0 2rem; /* lg:px-8 */
+  }
+}
+
+/* Header Section */
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 3rem; /* mb-12 */
+}
+
+.section-title {
+  font-size: 1.5rem; /* text-2xl */
+  font-weight: 700; /* font-bold */
+  color: var(--foreground);
+  margin: 0;
+}
+@media (min-width: 768px) {
+  .section-title {
+    font-size: 1.875rem; /* md:text-3xl */
+  }
+}
+
+.section-link {
+  font-size: 1rem;
+  font-weight: 500; /* font-medium */
+  color: var(--accent);
+  text-decoration: none;
+}
+.section-link:hover {
+  text-decoration: underline;
+}
+
+/* Product Grid */
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* grid-cols-2 */
+  gap: 1rem; /* gap-4 */
+}
+@media (min-width: 768px) {
+  .product-grid {
+    grid-template-columns: repeat(3, 1fr); /* md:grid-cols-3 */
+    gap: 1.5rem; /* md:gap-6 */
+  }
+}
+@media (min-width: 1024px) {
+  .product-grid {
+    grid-template-columns: repeat(4, 1fr); /* lg:grid-cols-4 */
+  }
+}
+
+/* Product Card */
+.product-card {
+  position: relative;
+  background-color: var(--card);
+  border-radius: 0.75rem; /* rounded-xl */
+  overflow: hidden;
+  border: 1px solid var(--border);
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+}
+.product-card:hover {
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 8px 10px -6px rgba(0, 0, 0, 0.1); /* hover:shadow-xl */
+}
+
+/* Badges */
+.product-badges {
+  position: absolute;
+  top: 0.75rem; /* top-3 */
+  left: 0.75rem; /* left-3 */
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem; /* gap-2 */
+  z-index: 10;
+}
+
+.badge {
+  padding: 0.25rem 0.5rem; /* px-2 py-1 */
+  font-size: 0.75rem; /* text-xs */
+  font-weight: 600; /* font-semibold */
+  border-radius: 0.25rem; /* rounded */
+  line-height: 1;
+  text-transform: uppercase;
+}
+.badge-discount {
+  background-color: var(--sale-bg);
+  color: var(--sale-fg);
+}
+
+/* Clickable Area */
+.product-link {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+  flex: 1; /* Pushes footer to the bottom */
+}
+
+.product-img-wrapper {
+  position: relative;
+  aspect-ratio: 4 / 5;
+  background-color: var(--secondary);
+  overflow: hidden;
+}
+
+.product-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+.product-card:hover .product-img {
+  transform: scale(1.05); /* group-hover:scale-105 */
+}
+
+/* Content Area */
+.product-info {
+  padding: 1rem; /* p-4 */
+  display: flex;
+  flex-direction: column;
+}
+
+.product-desc {
+  font-size: 0.75rem; /* text-xs */
+  color: var(--muted-foreground);
+  margin: 0 0 0.25rem 0; /* mb-1 */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.product-title {
+  font-size: 1rem;
+  font-weight: 600; /* font-semibold */
+  color: var(--foreground);
+  margin: 0 0 0.75rem 0; /* mb-3 */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.3;
+  transition: color 0.2s;
+}
+.product-card:hover .product-title {
+  color: var(--accent); /* group-hover:text-accent */
+}
+
+.product-pricing {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem; /* gap-2 */
+  margin-bottom: 0.75rem; /* mb-3 */
+}
+
+.price-current {
+  font-size: 1.125rem; /* text-lg */
+  font-weight: 700; /* font-bold */
+  color: var(--foreground);
+}
+
+.price-original {
+  font-size: 0.875rem; /* text-sm */
+  color: var(--muted-foreground);
+  text-decoration: line-through;
+}
+
+/* Footer (Availability & Button) */
+.product-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: auto;
+}
+
+.product-availability {
+  font-size: 0.75rem; /* text-xs */
+  font-weight: 500;
+  color: var(--muted-foreground);
+}
+
+/* Soft-matching text for Skladem to display green */
+.product-availability[data-status*="Skladem"] {
+  color: var(--success-text);
+}
+
+/* Injected Form Styling */
+.product-buy-form {
+  margin: 0;
+}
+.product-buy-form .btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem; /* px-4 py-2 */
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+  border-radius: 0.5rem; /* rounded-lg */
+  font-size: 0.875rem; /* text-sm */
+  font-weight: 500; /* font-medium */
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  font-family: inherit;
+  gap: 0.5rem;
+}
+.product-buy-form .btn:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--primary) 90%,
+    transparent
+  ); /* hover:bg-primary/90 */
+}
+
+/* Hide the text on small screens and just show icon if you insert one via pseudo-element,
+     but for injected forms, we keep standard padding to make it responsive. */
+@media (max-width: 639px) {
+  .product-buy-form .btn {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.75rem;
+  }
+}
@@ -0,0 +1,76 @@
+<section class="new-products-section">
+  <div class="container">
+    
+    <!-- Header -->
+    <div class="section-header">
+      <h2 class="section-title">{{section}}</h2>
+      <a href="#" class="section-link">Zobrazit vše &rarr;</a>
+    </div>
+
+    <!-- Products Grid -->
+    <div class="product-grid">
+      {{#each items}}
+        <div class="product-card">
+          
+          <!-- Badges Overlay -->
+          <div class="product-badges">
+            {{#each this.flags}}
+              <span class="badge" style="background-color: {{this.backgroundColor}}; color: {{this.textColor}};">
+                {{this.text}}
+              </span>
+            {{/each}}
+            
+            {{#if this.priceDiscount}}
+              <span class="badge badge-discount">
+                {{this.priceDiscount}}%
+              </span>
+            {{/if}}
+          </div>
+
+          <!-- Product Main Link -->
+          <a href="{{this.link}}" class="product-link">
+            <div class="product-img-wrapper">
+              <img 
+                src="{{this.imageSrc}}" 
+                alt="{{this.imageAlt}}" 
+                class="product-img" 
+                loading="lazy" 
+              />
+            </div>
+            
+            <div class="product-info">
+              {{#if this.description}}
+                <p class="product-desc">{{this.description}}</p>
+              {{/if}}
+              
+              <h3 class="product-title">{{this.title}}</h3>
+              
+              <div class="product-pricing">
+                <span class="price-current">{{this.priceHighlight}}</span>
+                {{#if this.priceBeforeDiscount}}
+                  <span class="price-original">{{this.priceBeforeDiscount}}</span>
+                {{/if}}
+              </div>
+            </div>
+          </a>
+
+          <!-- Interactive Footer (Stock & Add to Cart) - Placed outside <a> to prevent nesting bugs -->
+          <div class="product-info" style="padding-top: 0;">
+            <div class="product-footer">
+              <span class="product-availability" data-status="{{this.availability}}">
+                {{#if (eq this.availability "Skladem")}}✓ {{/if}}{{this.availability}}
+              </span>
+              
+              <div class="product-buy-form">
+                <!-- Injects the parsed <form> or <button> code directly -->
+                {{{this.buyFormContent}}}
+              </div>
+            </div>
+          </div>
+
+        </div>
+      {{/each}}
+    </div>
+
+  </div>
+</section>
@@ -1 +1 @@
-main#main #AjaxMainSection section.section_middle
+main#main #AjaxMainSection section.section_middle .vc-tabstemplate
@@ -16,14 +16,13 @@
  for (let i = 0; i < tabTexts.length; i++) {
    const idName = `Index_${i + 1}`;
    
-    const items = body.querySelectorAll(`#${idName} .owl-item > article.commodityBox`);
+    const items = body.querySelectorAll(`#${idName} article.commodityBox`);
    
    const itemsData = Array.from(items).map((item) => {
      const productNode = item.querySelector("a.inner");

      const link = productNode.getAttribute("href");
      
-      // UPDATED: Extracting background and text colors using getComputedStyle
      const flagsElements = productNode.querySelectorAll(".flags > .flags-inner > .flag");
      const flags = Array.from(flagsElements).map((flag) => {
        const styles = window.getComputedStyle(flag);
				`@@ -0,0 +1 @@`
				`main#main #AjaxMainSection .section_guidepost_before`
				`@@ -0,0 +1 @@`
				`main#main #AjaxMainSection section.section_middle .vc-commodity_attribute`