.elementor-388 .elementor-element.elementor-element-b20a639{--display:flex;}.elementor-388 .elementor-element.elementor-element-0669919{margin:-100px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}/* Start custom CSS for html, class: .elementor-element-0669919 */<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sofia Prints - Prodotti</title>
  <style>
    :root{
      --bg:#fffaf7;
      --card:#ffffff;
      --text:#3e2d2a;
      --muted:#7d6761;
      --line:#f0ddd5;
      --accent:#ff8f7a;
      --accent-2:#ffd8cc;
      --mint:#dff7ea;
      --mint-text:#1d7c57;
      --shadow:0 10px 30px rgba(70,35,25,.08);
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      background:linear-gradient(180deg,#fffaf7 0%,#fff6f1 100%);
      color:var(--text);
    }

    .section{
      padding:48px 20px 70px;
    }

    .container{
      max-width:1180px;
      margin:0 auto;
    }

    .section-head{
      text-align:center;
      margin-bottom:34px;
    }

    .section-tag{
      display:inline-block;
      padding:8px 14px;
      border-radius:999px;
      background:#fff;
      border:1px solid var(--line);
      color:#c17059;
      font-size:13px;
      letter-spacing:.08em;
      text-transform:uppercase;
      font-weight:700;
      margin-bottom:10px;
    }

    .section-head h2{
      margin:0 0 10px;
      font-size:42px;
      line-height:1.05;
    }

    .section-head p{
      margin:0;
      color:var(--muted);
      font-size:18px;
    }

    .product-hero{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:28px;
      align-items:start;
      margin-bottom:42px;
    }

    .product-gallery,
    .product-info,
    .product-card{
      background:var(--card);
      border:1px solid #f6e6df;
      box-shadow:var(--shadow);
    }

    .product-gallery{
      border-radius:var(--radius-xl);
      padding:22px;
      display:grid;
      grid-template-columns:100px 1fr;
      gap:18px;
    }

    .product-thumbs{
      display:flex;
      flex-direction:column;
      gap:12px;
    }

    .product-thumb{
      border:2px solid transparent;
      border-radius:18px;
      padding:6px;
      background:#fff7f4;
      cursor:pointer;
      transition:.2s ease;
    }

    .product-thumb img{
      width:100%;
      aspect-ratio:1/1;
      object-fit:cover;
      border-radius:12px;
      display:block;
    }

    .product-thumb.active{
      border-color:var(--accent);
      transform:translateY(-1px);
    }

    .product-main{
      background:#fff8f5;
      border-radius:24px;
      padding:22px;
      min-height:620px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .product-main img{
      max-width:100%;
      max-height:560px;
      object-fit:contain;
      display:block;
    }

    .product-info{
      border-radius:var(--radius-xl);
      padding:28px;
      position:sticky;
      top:20px;
    }

    .sticker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border-radius:999px;
      padding:8px 12px;
      font-size:13px;
      font-weight:800;
    }

    .sticker-mint{
      background:var(--mint);
      color:var(--mint-text);
    }

    .product-info h1{
      font-size:46px;
      line-height:1.02;
      margin:14px 0 16px;
    }

    .product-price{
      font-size:34px;
      font-weight:800;
      margin-bottom:14px;
    }

    .product-price small{
      font-size:18px;
      color:#b8a29b;
      text-decoration:line-through;
      margin-left:8px;
      font-weight:600;
    }

    .product-desc{
      color:var(--muted);
      font-size:17px;
      line-height:1.7;
      margin-bottom:24px;
    }

    .product-options{
      margin-bottom:20px;
    }

    .option-label{
      display:block;
      font-size:14px;
      font-weight:700;
      color:#8a6a62;
      margin-bottom:10px;
    }

    .option-chips{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }

    .chip{
      border:1px solid var(--line);
      background:#fff;
      border-radius:999px;
      padding:11px 16px;
      font-size:14px;
      font-weight:700;
      cursor:pointer;
      transition:.2s ease;
      user-select:none;
    }

    .chip.active{
      background:#2f2b2a;
      color:#fff;
      border-color:#2f2b2a;
    }

    .actions{
      display:flex;
      gap:12px;
      margin-top:10px;
    }

    .btn{
      border:none;
      cursor:pointer;
      transition:.2s ease;
      font-weight:800;
      border-radius:999px;
    }

    .btn:hover{
      transform:translateY(-1px);
    }

    .btn-primary{
      background:linear-gradient(135deg,#ff9b85,#ff7d66);
      color:#fff;
      padding:16px 24px;
      font-size:16px;
      box-shadow:0 12px 24px rgba(255,125,102,.25);
    }

    .btn-cream{
      width:54px;
      min-width:54px;
      background:#fff6f0;
      border:1px solid var(--line);
      font-size:22px;
      color:#8f6f66;
    }

    .mt-lg{
      margin-top:30px;
    }

    .mt-lg h2{
      text-align:center;
      margin-bottom:26px;
      font-size:34px;
    }

    .products-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
    }

    .product-card{
      border-radius:22px;
      overflow:hidden;
      cursor:pointer;
      transition:.2s ease;
    }

    .product-card:hover{
      transform:translateY(-4px);
    }

    .product-card.active-product-card{
      border:2px solid var(--accent);
      box-shadow:0 16px 34px rgba(255,143,122,.18);
    }

    .pc-img{
      background:#fff7f4;
      padding:14px;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:240px;
    }

    .pc-img img{
      width:100%;
      max-height:210px;
      object-fit:contain;
      display:block;
    }

    .pc-body{
      padding:18px 18px 20px;
    }

    .pc-body h3{
      margin:0 0 8px;
      font-size:22px;
    }

    .pc-desc{
      margin:0 0 10px;
      color:var(--muted);
      font-size:15px;
    }

    .pc-price{
      font-size:20px;
      font-weight:800;
    }

    @media (max-width: 1024px){
      .product-hero{
        grid-template-columns:1fr;
      }

      .product-info{
        position:static;
      }

      .products-grid{
        grid-template-columns:repeat(2,1fr);
      }
    }

    @media (max-width: 700px){
      .section-head h2{
        font-size:32px;
      }

      .product-gallery{
        grid-template-columns:1fr;
      }

      .product-thumbs{
        flex-direction:row;
        overflow:auto;
      }

      .product-thumb{
        min-width:82px;
      }

      .product-main{
        min-height:380px;
      }

      .product-info h1{
        font-size:34px;
      }

      .products-grid{
        grid-template-columns:1fr;
      }

      .actions{
        flex-wrap:wrap;
      }

      .btn-primary{
        width:100%;
      }
    }
  </style>
</head>
<body>
  <main class="page active" id="page-products">
    <section class="section">
      <div class="container">
        <div class="section-head">
          <span class="section-tag">~ il catalogo ~</span>
          <h2>Tutti i nostri prodotti</h2>
          <p>Un ritratto, tanti modi di portarlo con te (o di regalarlo).</p>
        </div>

        <div class="product-hero">
          <div class="product-gallery">
            <div class="product-thumbs" id="product-thumbs"></div>

            <div class="product-main">
              <img id="main-product-image" src="" alt="">
            </div>
          </div>

          <div class="product-info">
            <span class="sticker sticker-mint" id="product-badge"></span>
            <h1 id="product-title"></h1>
            <div class="product-price" id="product-price"></div>
            <p class="product-desc" id="product-desc"></p>

            <div class="product-options">
              <span class="option-label">Stile di esempio</span>
              <div class="option-chips" id="style-chips"></div>
            </div>

            <div class="product-options">
              <span class="option-label" id="secondary-option-label"></span>
              <div class="option-chips" id="secondary-option-chips"></div>
            </div>

            <div class="actions">
              <button class="btn btn-primary" type="button">Crea il tuo ritratto</button>
              <button class="btn btn-cream" type="button">❤</button>
            </div>
          </div>
        </div>

        <div class="mt-lg">
          <h2>Anche questi ti piaceranno</h2>

          <div class="products-grid" id="products-grid">
            <!-- TELA -->
            <div class="product-card" data-product-id="canvas">
              <div class="pc-img">
                <img src="https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-23-apr-2026-18_37_39-convertito-da-png.webp" alt="Tela personalizzata">
              </div>
              <div class="pc-body">
                <h3>Tela</h3>
                <p class="pc-desc">30×40cm su telaio</p>
                <div class="pc-price">€39,90</div>
              </div>
            </div>

            <!-- TAZZA -->
            <div class="product-card" data-product-id="mug">
              <div class="pc-img">
                <img src="https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-23-apr-2026-18_26_36-convertito-da-png.webp" alt="Tazza personalizzata">
              </div>
              <div class="pc-body">
                <h3>Tazza</h3>
                <p class="pc-desc">330ml · ceramica premium</p>
                <div class="pc-price">€18,90</div>
              </div>
            </div>

            <!-- COVER -->
            <div class="product-card" data-product-id="case">
              <div class="pc-img">
                <img src="https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-23-apr-2026-18_28_20-convertito-da-png.webp" alt="Cover telefono personalizzata">
              </div>
              <div class="pc-body">
                <h3>Cover telefono</h3>
                <p class="pc-desc">iPhone &amp; Android</p>
                <div class="pc-price">€24,90</div>
              </div>
            </div>

            <!-- CUSCINO -->
            <div class="product-card" data-product-id="pillow">
              <div class="pc-img">
                <img src="https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-23-apr-2026-18_23_35-convertito-da-png.webp" alt="Cuscino cuore personalizzato">
              </div>
              <div class="pc-body">
                <h3>Cuscino cuore</h3>
                <p class="pc-desc">Morbido peluche</p>
                <div class="pc-price">€29,90</div>
              </div>
            </div>

            <!-- QUADERNO -->
            <div class="product-card" data-product-id="notebook">
              <div class="pc-img">
                <img src="https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-24-apr-2026-09_23_06.webp" alt="Quaderno personalizzato">
              </div>
              <div class="pc-body">
                <h3>Quaderno</h3>
                <p class="pc-desc">A5 · 120 pagine</p>
                <div class="pc-price">€14,90</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <script>
    const products = {
      canvas: {
        badge: "✨ Più amato per la casa",
        title: "Tela<br>personalizzata",
        price: "€39,90",
        oldPrice: "€49,90",
        desc: "Tela 30×40cm su telaio, perfetta per arredare casa con il ritratto del tuo cucciolo. Colori intensi, effetto elegante e qualità premium.",
        optionLabel: "Formato",
        optionValues: ["30×40", "50×70"],
        images: [
          {
            name: "Portofino",
            image: "https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-23-apr-2026-18_37_39-convertito-da-png.webp"
          },
          {
            name: "Amalfi",
            image: "https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-23-apr-2026-18_37_39-convertito-da-png.webp"
          },
          {
            name: "Napoleone",
            image: "https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-23-apr-2026-18_37_39-convertito-da-png.webp"
          },
          {
            name: "Capri",
            image: "https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-23-apr-2026-18_37_39-convertito-da-png.webp"
          }
        ]
      },

      mug: {
        badge: "🏆 Best seller",
        title: "Tazza<br>personalizzata",
        price: "€18,90",
        oldPrice: "€24,90",
        desc: "Ceramica di alta qualità, 330ml. Stampa fotografica brillante che non si rovina in lavastoviglie. Il modo più bello di iniziare la giornata con il tuo pelosetto.",
        optionLabel: "Tazza Magica",
        optionValues: ["Si", "No"],
        images: [
          {
            name: "Portofino",
            image: "https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-23-apr-2026-18_26_36-convertito-da-png.webp"
          },
          {
            name: "Amalfi",
            image: "https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-24-apr-2026-09_08_59.webp"
          },
          {
            name: "Napoleone",
            image: "https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-24-apr-2026-08_56_55.webp"
          },
          {
            name: "Capri",
            image: "https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-24-apr-2026-09_16_30.webp"
          }
        ]
      },

      case: {
        badge: "📱 Sempre con te",
        title: "Cover<br>telefono",
        price: "€24,90",
        oldPrice: "€29,90",
        desc: "Cover personalizzata per iPhone e Android, resistente e con stampa brillante. Il tuo pet sempre con te, ogni giorno.",
        optionLabel: "Compatibilità",
        optionValues: ["iPhone", "Android"],
        images: [
          {
            name: "Portofino",
            image: "https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-23-apr-2026-18_28_20-convertito-da-png.webp"
          },
          {
            name: "Amalfi",
            image: "https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-23-apr-2026-18_28_20-convertito-da-png.webp"
          },
          {
            name: "Napoleone",
            image: "https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-23-apr-2026-18_28_20-convertito-da-png.webp"
          },
          {
            name: "Capri",
            image: "https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-23-apr-2026-18_28_20-convertito-da-png.webp"
          }
        ]
      },

      pillow: {
        badge: "💛 Super regalo",
        title: "Cuscino<br>cuore",
        price: "€29,90",
        oldPrice: "€34,90",
        desc: "Cuscino cuore morbido e coccoloso con stampa personalizzata. Un regalo affettuoso e originale per chi ama il proprio pelosetto.",
        optionLabel: "Misura",
        optionValues: ["Standard", "Large"],
        images: [
          {
            name: "Portofino",
            image: "https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-23-apr-2026-18_23_35-convertito-da-png.webp"
          },
          {
            name: "Amalfi",
            image: "https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-23-apr-2026-18_23_35-convertito-da-png.webp"
          },
          {
            name: "Napoleone",
            image: "https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-23-apr-2026-18_23_35-convertito-da-png.webp"
          },
          {
            name: "Capri",
            image: "https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-23-apr-2026-18_23_35-convertito-da-png.webp"
          }
        ]
      },

      notebook: {
        badge: "📝 Nuovo",
        title: "Quaderno<br>personalizzato",
        price: "€14,90",
        oldPrice: "€19,90",
        desc: "Quaderno A5 da 120 pagine con copertina personalizzata. Perfetto da regalare o da tenere sempre in borsa con il tuo pet.",
        optionLabel: "Formato",
        optionValues: ["A5", "A4"],
        images: [
          {
            name: "Portofino",
            image: "https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-24-apr-2026-09_23_06.webp"
          },
          {
            name: "Amalfi",
            image: "https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-24-apr-2026-09_23_06.webp"
          },
          {
            name: "Napoleone",
            image: "https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-24-apr-2026-09_23_06.webp"
          },
          {
            name: "Capri",
            image: "https://sofiaprints.eu/wp-content/uploads/2026/04/ChatGPT-Image-24-apr-2026-09_23_06.webp"
          }
        ]
      }
    };

    const mainImage = document.getElementById("main-product-image");
    const productBadge = document.getElementById("product-badge");
    const productTitle = document.getElementById("product-title");
    const productPrice = document.getElementById("product-price");
    const productDesc = document.getElementById("product-desc");
    const styleChips = document.getElementById("style-chips");
    const productThumbs = document.getElementById("product-thumbs");
    const secondaryOptionLabel = document.getElementById("secondary-option-label");
    const secondaryOptionChips = document.getElementById("secondary-option-chips");
    const productCards = document.querySelectorAll(".product-card");

    let currentProductId = "mug";
    let currentStyleIndex = 0;

    function renderMainProduct(productId) {
      const product = products[productId];
      if (!product) return;

      currentProductId = productId;
      currentStyleIndex = 0;

      productBadge.textContent = product.badge;
      productTitle.innerHTML = product.title;
      productPrice.innerHTML = `${product.price} <small>${product.oldPrice}</small>`;
      productDesc.textContent = product.desc;
      secondaryOptionLabel.textContent = product.optionLabel;

      renderMainImage();
      renderStyleChips();
      renderThumbs();
      renderSecondaryOptions();

      productCards.forEach(card => {
        card.classList.remove("active-product-card");
        if (card.dataset.productId === productId) {
          card.classList.add("active-product-card");
        }
      });
    }

    function renderMainImage() {
      const product = products[currentProductId];
      const currentImage = product.images[currentStyleIndex];
      mainImage.src = currentImage.image;
      mainImage.alt = currentImage.name;
    }

    function renderStyleChips() {
      const product = products[currentProductId];
      styleChips.innerHTML = "";

      product.images.forEach((item, index) => {
        const chip = document.createElement("div");
        chip.className = "chip" + (index === currentStyleIndex ? " active" : "");
        chip.textContent = item.name;

        chip.addEventListener("click", function() {
          currentStyleIndex = index;
          renderMainImage();
          renderStyleChips();
          renderThumbs();
        });

        styleChips.appendChild(chip);
      });
    }

    function renderThumbs() {
      const product = products[currentProductId];
      productThumbs.innerHTML = "";

      product.images.forEach((item, index) => {
        const thumb = document.createElement("div");
        thumb.className = "product-thumb" + (index === currentStyleIndex ? " active" : "");
        thumb.innerHTML = `<img src="${item.image}" alt="${item.name}">`;

        thumb.addEventListener("click", function() {
          currentStyleIndex = index;
          renderMainImage();
          renderStyleChips();
          renderThumbs();
        });

        productThumbs.appendChild(thumb);
      });
    }

    function renderSecondaryOptions() {
      const product = products[currentProductId];
      secondaryOptionChips.innerHTML = "";

      product.optionValues.forEach((value, index) => {
        const chip = document.createElement("div");
        chip.className = "chip" + (index === 0 ? " active" : "");
        chip.textContent = value;

        chip.addEventListener("click", function() {
          secondaryOptionChips.querySelectorAll(".chip").forEach(c => c.classList.remove("active"));
          chip.classList.add("active");
        });

        secondaryOptionChips.appendChild(chip);
      });
    }

    productCards.forEach(card => {
      card.addEventListener("click", function() {
        const productId = card.dataset.productId;
        renderMainProduct(productId);
      });
    });

    renderMainProduct("mug");
  </script>
</body>
</html>/* End custom CSS */