(function() {
  'use strict';

  // ── Grid fix (light DOM) ──────────────────────────────────────────────
  // The wrapper creates a competing grid — kill it so .s-products-list is the sole grid
  var gridCSS = document.createElement('style');
  gridCSS.textContent =
    '.s-products-list-wrapper,' +
    '.s-products-list-wrapper.s-products-list-vertical-cards {' +
      'display: block !important;' +
      'width: 100% !important;' +
      'max-width: 100% !important;' +
    '}' +
    '.s-products-list {' +
      'display: grid !important;' +
      'grid-template-columns: repeat(2, 1fr) !important;' +
      'gap: 20px !important;' +
      'width: 100% !important;' +
      'max-width: 100% !important;' +
      'padding: 0 15px;' +
    '}' +
    '@media (min-width: 768px) {' +
      '.s-products-list {' +
        'grid-template-columns: repeat(3, 1fr) !important;' +
        'gap: 25px !important;' +
        'padding: 0 20px;' +
      '}' +
    '}' +
    '@media (min-width: 1024px) {' +
      '.s-products-list {' +
        'grid-template-columns: repeat(4, 1fr) !important;' +
        'gap: 30px !important;' +
        'padding: 0;' +
        'max-width: 1440px;' +
        'margin: 0 auto;' +
      '}' +
    '}' +
    'custom-salla-product-card,' +
    '.s-product-card-entry {' +
      'width: 100% !important;' +
      'min-width: 0 !important;' +
      'max-width: 100% !important;' +
    '}';
  document.head.appendChild(gridCSS);

  // ── Shadow DOM injection styles ───────────────────────────────────────
  var shadowStyles =
    ':host {' +
      'display: flex !important;' +
      'flex-direction: column !important;' +
      'width: 100% !important;' +
      'min-width: 0 !important;' +
      'max-width: 100% !important;' +
      'border: 1px solid #e8e8e8 !important;' +
      'border-radius: 0 !important;' +
      'overflow: hidden;' +
      'background: #fff;' +
      'transition: box-shadow 0.3s ease, transform 0.2s ease;' +
    '}' +
    ':host(:hover) {' +
      'box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;' +
      'transform: translateY(-2px);' +
    '}' +

    // Image wrapper — 3:4 aspect ratio
    '.s-product-card-image {' +
      'position: relative !important;' +
      'overflow: hidden !important;' +
      'aspect-ratio: 3/4 !important;' +
      'width: 100% !important;' +
    '}' +

    // Image fill
    '.s-product-card-image img,' +
    '.s-product-card-image-cover,' +
    'img.s-product-card-image-cover {' +
      'width: 100% !important;' +
      'height: 100% !important;' +
      'object-fit: cover !important;' +
      'object-position: center center !important;' +
      'display: block !important;' +
      'transition: transform 0.5s ease;' +
    '}' +
    ':host(:hover) .s-product-card-image img,' +
    ':host(:hover) img.s-product-card-image-cover {' +
      'transform: scale(1.05);' +
    '}' +

    // Content area
    '.s-product-card-content {' +
      'padding: 12px 10px 16px !important;' +
      'text-align: center !important;' +
      'display: flex;' +
      'flex-direction: column;' +
      'flex-grow: 1;' +
      'font-family: "Poppins", sans-serif !important;' +
    '}' +

    // Title
    '.s-product-card-content-title,' +
    '.s-product-card-content-title a {' +
      'font-family: "Poppins", sans-serif !important;' +
      'font-size: 14px !important;' +
      'font-weight: 500 !important;' +
      'color: #222 !important;' +
      'text-align: center !important;' +
      'line-height: 1.4 !important;' +
      'display: block;' +
      'overflow: hidden;' +
      'text-overflow: ellipsis;' +
      'white-space: nowrap;' +
      'text-decoration: none;' +
    '}' +
    '.s-product-card-content-title a:hover {' +
      'color: #56cfe1 !important;' +
    '}' +

    // Price
    '.s-product-card-price {' +
      'font-family: "Poppins", sans-serif !important;' +
      'font-size: 14px !important;' +
      'font-weight: 600 !important;' +
      'color: #222 !important;' +
      'text-align: center !important;' +
    '}' +

    // Footer / add-to-cart
    '.s-product-card-content-footer {' +
      'display: flex !important;' +
      'gap: 7px !important;' +
      'margin-top: auto;' +
      'padding-top: 8px;' +
    '}' +

    // Wishlist button
    '.s-product-card-wishlist-btn {' +
      'position: absolute !important;' +
      'top: 10px !important;' +
      'z-index: 5;' +
    '}' +

    // Badge
    '[class*="badge"] {' +
      'position: absolute !important;' +
      'top: 10px !important;' +
      'background-color: #eb001b !important;' +
      'color: #fff !important;' +
      'font-family: "Poppins", sans-serif !important;' +
      'font-size: 12px !important;' +
      'font-weight: 600 !important;' +
      'padding: 4px 10px !important;' +
      'border-radius: 3px !important;' +
      'z-index: 5;' +
    '}';

  // ── Inject into a single card's shadow root ───────────────────────────
  function injectIntoShadow(card) {
    if (card._peplaStyled) return;
    var root = card.shadowRoot;
    if (!root) return;
    var style = document.createElement('style');
    style.setAttribute('data-pepla', '1');
    style.textContent = shadowStyles;
    root.appendChild(style);
    card._peplaStyled = true;
  }

  // ── Process all current cards ─────────────────────────────────────────
  function processAll() {
    var cards = document.querySelectorAll('custom-salla-product-card');
    for (var i = 0; i < cards.length; i++) {
      injectIntoShadow(cards[i]);
    }
  }

  // ── Watch for new cards (lazy load / pagination / AJAX) ───────────────
  var observer = new MutationObserver(function(mutations) {
    for (var m = 0; m < mutations.length; m++) {
      var nodes = mutations[m].addedNodes;
      for (var n = 0; n < nodes.length; n++) {
        var node = nodes[n];
        if (node.nodeType !== 1) continue;
        if (node.tagName === 'CUSTOM-SALLA-PRODUCT-CARD') {
          waitForShadow(node);
        }
        // Also check children (card might be nested inside added container)
        if (node.querySelectorAll) {
          var nested = node.querySelectorAll('custom-salla-product-card');
          for (var k = 0; k < nested.length; k++) {
            waitForShadow(nested[k]);
          }
        }
      }
    }
  });

  // Shadow root may not exist immediately — poll briefly
  function waitForShadow(card) {
    if (card.shadowRoot) {
      injectIntoShadow(card);
      return;
    }
    var attempts = 0;
    var timer = setInterval(function() {
      attempts++;
      if (card.shadowRoot) {
        injectIntoShadow(card);
        clearInterval(timer);
      } else if (attempts > 50) {
        clearInterval(timer); // give up after 5s
      }
    }, 100);
  }

  // ── Boot ──────────────────────────────────────────────────────────────
  function init() {
    processAll();
    observer.observe(document.body, { childList: true, subtree: true });

    // Re-process after Salla finishes hydrating (belt & suspenders)
    document.addEventListener('salla::ready', processAll);
    window.addEventListener('load', function() {
      setTimeout(processAll, 500);
      setTimeout(processAll, 2000);
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();