/* =========================================
   Section: Products (Δομή & Aesthetics)
========================================= */

   div.products .products-subtitle {
      font-size: var(--huge-title);
      line-height: var(--huge-title-line-height);
   }

   div.products .products-selector {
      font-size: var(--h5-font-size);
      line-height: var(--h5-line-height);
   }

   div.products .products-accordion {
      display: flex;
      flex-direction: column;
      gap: 12px;
   }

   div.products .products-item {
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      overflow: hidden;
   }
   div.products .products-trigger {
      padding: 16px;
      background-color: #wjite;
      user-select: none;
      transition: background-color 0.3s ease;
   }

   div.products [data-ui-open="true"] .products-trigger {
      background-color: var(--border-color);
   }

   div.products .products-content {
      padding: 0px 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      border-top: 1px solid #cbd5e1;
   }

   div.products .products-seo-text {
      padding-top: 15px;
   }

   /* Icon Animation based on the new custom attribute */
   div.products .products-item[data-ui-open="true"] .products-icon {
      transform: rotate(180deg);
      transition: transform 0.3s ease;
   }
   div.products .products-item[data-ui-open="false"] .products-icon {
      transform: rotate(0deg);
      transition: transform 0.3s ease;
   }

/* =========================================
   Section: Products Grid (Replaces Carousel)
========================================= */
   div.products .products-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
      gap: 16px;
      padding-bottom: 20px;
      padding-top: 8px;
   }

   div.products .products-card {
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: space-between;
      gap: 4px;
      text-decoration: none;
      width: 100%;
      color: inherit;
   }

   div.products .products-img {
      width: 100%;
      aspect-ratio: 4/5;
      object-fit: cover;
      background-color: #e2e8f0;
   }

   div.products .products-name {
      display: block;
      font-weight: 600;
   }

   div.products .products-en {
      display: block;
      font-size: 0.9em;
   }

   div.products .product-button {
      align-self: stretch;
   }

   /* Tablet & Desktop Layouts */
   @media (min-width: 768px) {
      div.products .products-grid {
         grid-template-columns: repeat(3, 1fr); /* 3 columns on tablet */
      }
   }
   @media (min-width: 1024px) {
      div.products .products-grid {
         grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
      }
   }