.elementor-5781 .elementor-element.elementor-element-fc8d8bf .elementor-spacer-inner{height:50px;}.ee-tooltip.ee-tooltip-f3f4b89.to--top,
							 .ee-tooltip.ee-tooltip-f3f4b89.to--bottom{transform:translateX(0px);}.ee-tooltip.ee-tooltip-f3f4b89.to--left,
							 .ee-tooltip.ee-tooltip-f3f4b89.to--right{transform:translateY(0px);}.elementor-5781 .elementor-element.elementor-element-22a85b6 > .elementor-background-overlay{opacity:0.5;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-5781 .elementor-element.elementor-element-22a85b6{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:-37px;margin-bottom:0px;padding:32px 0px 32px 0px;}.elementor-5781 .elementor-element.elementor-element-f3fa38c > .elementor-widget-container{background-color:#bfbfbf;}.ee-tooltip.ee-tooltip-f3fa38c.to--top,
							 .ee-tooltip.ee-tooltip-f3fa38c.to--bottom{transform:translateX(0px);}.ee-tooltip.ee-tooltip-f3fa38c.to--left,
							 .ee-tooltip.ee-tooltip-f3fa38c.to--right{transform:translateY(0px);}.ee-tooltip.ee-tooltip-894f6f4.to--top,
							 .ee-tooltip.ee-tooltip-894f6f4.to--bottom{transform:translateX(0px);}.ee-tooltip.ee-tooltip-894f6f4.to--left,
							 .ee-tooltip.ee-tooltip-894f6f4.to--right{transform:translateY(0px);}.elementor-5781 .elementor-element.elementor-element-84532bc > .elementor-widget-container{margin:00px 0px 0px 0px;}.ee-tooltip.ee-tooltip-84532bc.to--top,
							 .ee-tooltip.ee-tooltip-84532bc.to--bottom{transform:translateX(0px);}.ee-tooltip.ee-tooltip-84532bc.to--left,
							 .ee-tooltip.ee-tooltip-84532bc.to--right{transform:translateY(0px);}.elementor-5781 .elementor-element.elementor-element-96d3152 > .elementor-background-overlay{opacity:0.5;}.elementor-5781 .elementor-element.elementor-element-96d3152{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-5781 .elementor-element.elementor-element-e649df7 a.elementor-button, .elementor-5781 .elementor-element.elementor-element-e649df7 .elementor-button{font-family:"Arial", Sans-serif;text-shadow:0px 0px 10px rgba(0,0,0,0.3);background-color:#0c0c0c;}.elementor-5781 .elementor-element.elementor-element-2bb483b a.elementor-button, .elementor-5781 .elementor-element.elementor-element-2bb483b .elementor-button{font-family:"Arial", Sans-serif;text-shadow:0px 0px 10px rgba(0,0,0,0.3);background-color:#c6c6c6;}.elementor-5781 .elementor-element.elementor-element-8196e7b a.elementor-button, .elementor-5781 .elementor-element.elementor-element-8196e7b .elementor-button{font-family:"Arial", Sans-serif;text-shadow:0px 0px 10px rgba(0,0,0,0.3);background-color:#c6c6c6;}.elementor-5781 .elementor-element.elementor-element-6641e7b .elementor-spacer-inner{height:237px;}/* Start custom CSS for page-settings */<body.elementor-page-5781>
<div class="soprema-hub">
  <div class="sh-header">
    <div class="sh-header-inner">
      <span class="sh-eyebrow">Resource Hub</span>
    </div>
  </div>

  <div class="sh-container">
    <header class="sh-intro">
      <h1>Resource Hub</h1>
      <p>Everything you need as a SOPREMA customer — product brochures, technical details, and warranty access, all in one place.</p>
      <div class="sh-accent"></div>
    </header>

    <!-- BROCHURES -->
    <h2 class="sh-section-title">Brochures</h2>
    <ul class="sh-grid">
      <li class="sh-card">
        <div class="sh-thumb">
          <img src="/wp-content/uploads/foundation-guide-thumbnail.png" alt="Foundation Guide" />
        </div>
        <div class="sh-card-actions">
          <a class="sh-btn sh-btn-primary" href="/wp-content/uploads/FG01_Foundation_Guide.pdf" target="_blank" rel="noopener">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            Download Now
          </a>
        </div>
      </li>
      <!-- duplicate <li class="sh-card"> blocks for more brochures -->
    </ul>

    <!-- DETAILS -->
    <h2 class="sh-section-title sh-mt-xl">Details</h2>
    <div class="sh-placeholder">
      <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
      <p class="sh-placeholder-title">Technical details coming soon</p>
      <p class="sh-placeholder-sub">You'll be able to upload installation details, spec sheets, and CAD drawings here.</p>
    </div>

    <!-- WARRANTY -->
    <h2 class="sh-section-title sh-mt-xl">Warranty Portal</h2>
    <div class="sh-warranty">
      <div class="sh-warranty-icon">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
      </div>
      <div class="sh-warranty-body">
        <h3>Register and manage your warranties</h3>
        <p>Access warranty registration, claims, and certificates through the SOPREMA Warranty Portal.</p>
        <a class="sh-btn sh-btn-primary sh-mt-md" href="https://warranty.soprema.com" target="_blank" rel="noopener">Open Warranty Portal</a>
      </div>
    </div>
  </div>
</div>

<style>
/* ========= SOPREMA HUB — scoped to .soprema-hub ========= */
.soprema-hub { --sh-brand:#0093D0; --sh-fg:#0f172a; --sh-muted:#64748b; --sh-bg:#ffffff; --sh-card:#ffffff; --sh-border:#e2e8f0; --sh-accent:#f1f5f9; --sh-radius:14px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:var(--sh-fg); background:var(--sh-bg); }
.soprema-hub *,.soprema-hub *::before,.soprema-hub *::after { box-sizing:border-box; }
.soprema-hub .sh-header { border-bottom:1px solid var(--sh-border); background:#fff; }
.soprema-hub .sh-header-inner { max-width:960px; margin:0 auto; padding:16px 24px; display:flex; justify-content:flex-end; }
.soprema-hub .sh-eyebrow { font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--sh-brand); }
.soprema-hub .sh-container { max-width:960px; margin:0 auto; padding:48px 24px; }
.soprema-hub .sh-intro h1 { font-size:30px; font-weight:600; letter-spacing:-.02em; margin:0; }
.soprema-hub .sh-intro p { margin:8px 0 0; font-size:14px; color:var(--sh-muted); }
.soprema-hub .sh-accent { margin-top:16px; width:64px; height:4px; border-radius:9999px; background:var(--sh-brand); }
.soprema-hub .sh-section-title { margin:40px 0 12px; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--sh-muted); }
.soprema-hub .sh-mt-xl { margin-top:64px; }
.soprema-hub .sh-mt-md { margin-top:16px; }
.soprema-hub .sh-grid { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:880px){ .soprema-hub .sh-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .soprema-hub .sh-grid{ grid-template-columns:1fr;} }
.soprema-hub .sh-card { background:var(--sh-card); border:1px solid var(--sh-border); border-radius:var(--sh-radius); overflow:hidden; transition:box-shadow .2s ease; }
.soprema-hub .sh-card:hover { box-shadow:0 10px 24px rgba(15,23,42,.08); }
.soprema-hub .sh-thumb { aspect-ratio:3/4; background:linear-gradient(135deg,#eef2f6,#e6eef4); overflow:hidden; }
.soprema-hub .sh-thumb img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform .3s ease; }
.soprema-hub .sh-card:hover .sh-thumb img { transform:scale(1.02); }
.soprema-hub .sh-card-actions { padding:12px; }
.soprema-hub .sh-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:10px 14px; font-size:14px; font-weight:500; border-radius:8px; text-decoration:none; cursor:pointer; border:none; transition:background .2s ease; }
.soprema-hub .sh-btn-primary { background:var(--sh-brand); color:#fff; }
.soprema-hub .sh-btn-primary:hover { background:rgba(0,147,208,.9); }
.soprema-hub .sh-warranty { display:flex; gap:16px; align-items:flex-start; background:var(--sh-card); border:1px solid var(--sh-border); border-radius:var(--sh-radius); padding:32px; }
.soprema-hub .sh-warranty-icon { flex:0 0 48px; width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:rgba(0,147,208,.1); color:var(--sh-brand); border-radius:10px; }
.soprema-hub .sh-warranty-body h3 { margin:0; font-size:16px; font-weight:600; }
.soprema-hub .sh-warranty-body p { margin:4px 0 0; font-size:14px; color:var(--sh-muted); }
.soprema-hub .sh-warranty-body .sh-btn { width:auto; padding:10px 18px; }
.soprema-hub .sh-placeholder { border:2px dashed var(--sh-border); border-radius:var(--sh-radius); background:var(--sh-card); padding:40px; text-align:center; color:var(--sh-muted); }
.soprema-hub .sh-placeholder-title { margin:12px 0 0; font-size:14px; font-weight:500; color:var(--sh-fg); }
.soprema-hub .sh-placeholder-sub { margin:4px 0 0; font-size:12px; }
</style>/* End custom CSS */