/* Zajednički stil stranica e-commerce integracija (WooCommerce, Wix; kasnije Shopify).
   Preuzeto bez izmena iz woocommerce-fiskalizacija.html; nazivi klasa zadržani radi kompatibilnosti. */
    .woocommerce-hero-visual {
      display: grid;
      gap: 18px;
      align-self: stretch;
    }

    .seo-hero-grid {
      grid-template-columns: minmax(0, .95fr) minmax(0, .85fr);
      gap: 38px;
      align-items: center;
      overflow: visible;
    }

    .hero {
      overflow: hidden;
    }

    .hero-info-card {
      border-radius: 26px;
      border: 1px solid rgba(34, 197, 151, 0.16);
      background: rgba(4, 20, 17, 0.72);
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
      backdrop-filter: blur(12px);
      padding: 26px;
      color: rgba(241, 255, 250, 0.96);
    }

    .hero-info-card h3 {
      margin: 0 0 14px;
      color: #fff;
    }

    .hero-info-card p {
      margin: 0;
      color: rgba(226, 255, 246, 0.74);
    }

    .hero-flow-list {
      display: grid;
      gap: 12px;
      margin: 18px 0 0;
      padding: 0;
      list-style: none;
    }

    .hero-flow-list li {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 12px;
      align-items: start;
      padding: 12px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .hero-flow-list li:first-child {
      border-top: 0;
      padding-top: 0;
    }

    .hero-flow-index {
      display: inline-flex;
      width: 34px;
      height: 34px;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(34, 197, 151, 0.16);
      color: #29e0a2;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
    }

    .hero-flow-copy strong {
      display: block;
      margin-bottom: 4px;
      color: #fff;
      font-size: 15px;
    }

    .hero-flow-copy span {
      display: block;
      color: rgba(226, 255, 246, 0.70);
      font-size: 14px;
      line-height: 1.5;
    }

    .hero-card-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .hero-mini-card {
      padding: 22px 20px;
      border-radius: 22px;
      border: 1px solid rgba(34, 197, 151, 0.14);
      background: rgba(255, 255, 255, 0.05);
      box-shadow: 0 16px 46px rgba(0, 0, 0, 0.12);
      color: #fff;
    }

    .hero-mini-card .mini-kicker {
      display: block;
      margin-bottom: 10px;
      color: rgba(177, 255, 228, 0.72);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .hero-mini-card strong {
      display: block;
      margin-bottom: 6px;
      font-size: 24px;
      line-height: 1.1;
    }

    .hero-mini-card p {
      margin: 0;
      color: rgba(226, 255, 246, 0.70);
      font-size: 14px;
    }

    .hero-mini-card ul {
      margin: 0;
      padding-left: 18px;
      color: rgba(226, 255, 246, 0.78);
    }

    .hero-mini-card li + li {
      margin-top: 6px;
    }

    .woocommerce-flow {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-top: 32px;
    }

    .woocommerce-flow-step {
      position: relative;
      padding: 22px;
      border: 1px solid rgba(20, 184, 166, 0.18);
      border-radius: 20px;
      background: #fff;
    }

    .woocommerce-flow-step b {
      display: inline-flex;
      width: 34px;
      height: 34px;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin-bottom: 14px;
      background: rgba(20, 184, 166, 0.10);
      color: #0f8f82;
      font-size: 13px;
    }

    .woocommerce-flow-step h3 {
      margin: 0 0 8px;
    }

    .woocommerce-flow-step p {
      margin: 0;
    }

    .plugin-shot {
      overflow: hidden;
      border-radius: 24px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      background: #fff;
      box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
    }

    .plugin-shot img {
      display: block;
      width: 100%;
      height: auto;
    }

    .plugin-showcase {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: 48px;
      align-items: center;
    }

    .plugin-showcase.reverse {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    }

    .plugin-showcase-copy h2 {
      margin-top: 0;
    }

    .mini-points {
      display: grid;
      gap: 12px;
      margin: 24px 0 0;
      padding: 0;
      list-style: none;
    }

    .mini-points li {
      position: relative;
      padding-left: 28px;
    }

    .mini-points li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: 0;
      font-weight: 800;
      color: #0f9f8f;
    }

    .plugin-feature-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
    }

    .plugin-feature {
      padding: 24px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 20px;
      background: #fff;
    }

    .plugin-feature .plugin-feature-kicker {
      display: inline-block;
      margin-bottom: 12px;
      color: #0f8f82;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .plugin-feature h3 {
      margin: 0 0 10px;
    }

    .plugin-feature p {
      margin: 0;
    }

    .trust-strip {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 28px;
      align-items: center;
      padding: 28px 32px;
      border-radius: 24px;
      background: #0b1715;
      color: #fff;
    }

    .trust-strip p {
      margin: 8px 0 0;
      color: rgba(255,255,255,.72);
    }

    .trust-strip strong {
      font-size: 22px;
    }

    .woocommerce-logo-pill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 18px;
      padding: 9px 14px;
      border: 1px solid rgba(31, 220, 158, .18);
      border-radius: 999px;
      background: rgba(255, 255, 255, .055);
      color: rgba(226, 255, 246, .78);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .01em;
      backdrop-filter: blur(8px);
    }

    .pricing-note {
      margin-top: 18px;
      font-size: 14px;
      opacity: .78;
    }

    @media (max-width: 960px) {
      .woocommerce-flow,
      .plugin-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .plugin-showcase,
      .plugin-showcase.reverse {
        grid-template-columns: 1fr;
      }

      .seo-hero-grid {
        grid-template-columns: 1fr;
      }

      .hero-card-grid {
        grid-template-columns: 1fr;
      }

      .trust-strip {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .woocommerce-flow,
      .plugin-feature-grid {
        grid-template-columns: 1fr;
      }
    }
    .seo-light-card .btn-wordpress {
  background: #eef4f2;
  color: #102a33;
  border: 1px solid #d5e2de;
}

.seo-light-card .btn-wordpress:hover {
  background: #e2ece8;
  color: #061711;
  border-color: #c7d8d2;
}

/* Potpis ispod snimka ekrana (npr. „Prikaz sa demo podacima”). */
.plugin-shot figcaption {
  padding: 10px 16px 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  color: #667085;
  font-size: 13px;
}

.section.dark .plugin-shot figcaption {
  color: #667085;
}

.integration-note {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(15, 143, 130, 0.18);
  background: rgba(20, 184, 166, 0.06);
  font-size: 15px;
}

figure.plugin-shot {
  margin: 0;
}