/* SUM3D — shared styles for the static site.
   Layout stays as inline styles on the elements; this file holds the base,
   keyframes, responsive nav, hover states, the ExtrudeButton and the image
   placeholder. Hover rules use !important to override the inline base styles. */

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#FFFFFF}
body{
  background-image:repeating-linear-gradient(30deg,#F2F3FC 0 1px,transparent 1px 46px),repeating-linear-gradient(-30deg,#F2F3FC 0 1px,transparent 1px 46px);
  background-attachment:fixed;
  font-family:'Cabin',sans-serif;color:#14153D;-webkit-font-smoothing:antialiased;
}
a{color:#2E3192;text-decoration:none}
a:hover{color:#1E2170}
::selection{background:#E8A400;color:#14153D}

/* ---- keyframes ---- */
@keyframes sum3dprint{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes sum3dnozzle{0%{top:100%;opacity:0}14%{opacity:1}86%{opacity:1}100%{top:-2px;opacity:0}}
@keyframes sum3dspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  [data-sum3d-anim]{animation:none !important;opacity:1 !important;transform:none !important}
  [data-sum3d-sweep]{display:none}
}

/* ---- responsive nav (hamburger + drawer) ---- */
.sum3d-burger{display:none}
.sum3d-drawer,.sum3d-scrim{display:none}
@media (max-width:820px){
  .sum3d-deskonly{display:none !important}
  .sum3d-burger{display:inline-flex !important}
  .sum3d-drawer,.sum3d-scrim{display:block !important}
}

/* ---- hover states (override inline base styles) ---- */
.navlink:hover{border-bottom:2px solid #E8A400 !important;color:#2E3192 !important}
.vertodos:hover{color:#1E2170 !important;border-bottom-color:#2E3192 !important}
.card{transition:transform 180ms cubic-bezier(.32,.72,.32,1),box-shadow 180ms cubic-bezier(.32,.72,.32,1)}
.card:hover{transform:translate(-8px,-8px);box-shadow:8px 8px 0 0 #FFFFFF,8px 8px 0 2px #2E3192}
.card__title:hover{color:#2E3192 !important}
.contact-wa:hover{background:#2E3192 !important;border-color:#2E3192 !important;color:#FFFFFF !important}
.contact-ig:hover{color:#FFFFFF !important}
.chip:hover{border-color:#2E3192 !important;background:#E9EAFB !important}

/* ---- image placeholder (replaces the design-tool image-slot) ---- */
.imgslot{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:12px;background:rgba(127,127,127,.06);color:#5A5DC9;
  font:13px/1.35 'Cabin',sans-serif;
}
.imgslot svg{opacity:.5;flex:none}
img.imgslot{object-fit:cover;padding:0}

/* ---- ExtrudeButton ---- */
.xbtn-wrap{position:relative;display:inline-flex;vertical-align:top}
.xbtn-wrap[data-size="sm"]{--xd:6px}
.xbtn-wrap[data-size="md"]{--xd:9px}
.xbtn-wrap[data-size="lg"]{--xd:12px}
.xbtn{
  position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Lexend',sans-serif;font-weight:600;line-height:1;letter-spacing:.01em;
  border-radius:2px;cursor:pointer;white-space:nowrap;margin:0;appearance:none;
  transition:transform 150ms cubic-bezier(.32,.72,.32,1),background-color 130ms ease;
  -webkit-tap-highlight-color:transparent;
}
.xbtn svg{width:1.15em;height:1.15em;display:block;flex:none}
.xbtn--sm{padding:9px 18px;font-size:14px}
.xbtn--md{padding:13px 26px;font-size:16px}
.xbtn--lg{padding:17px 34px;font-size:18px;border-radius:3px}
.xbtn--primary{background:#2E3192;color:#FFFFFF;border:2px solid #2E3192}
/* hover rules re-assert text color: the global a:hover{color:#1E2170} outranks
   the base variant class on hover, and these buttons are anchors */
.xbtn--primary:hover{background:#1E2170;color:#FFFFFF}
.xbtn--secondary{background:#FFFFFF;color:#2E3192;border:2px solid #2E3192}
.xbtn--secondary:hover{background:#E9EAFB;color:#2E3192}
.xbtn--ghost{background:transparent;color:#2E3192;border:2px solid transparent}
.xbtn--ghost:hover{background:#E9EAFB;color:#2E3192}
.xbtn__extrude{position:absolute;left:0;top:0;overflow:visible;z-index:1;pointer-events:none;
  transition:opacity 150ms cubic-bezier(.32,.72,.32,1)}
.xbtn-wrap:active .xbtn{transform:translate(var(--xd,9px),var(--xd,9px))}
.xbtn-wrap:active .xbtn__extrude{opacity:0;transition-duration:30ms}

/* ---- sort buttons (products page) ---- */
.sortbtn{appearance:none;cursor:pointer;font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.06em;
  padding:8px 12px;border-radius:2px;border:2px solid #C9CBEE;background:#FFFFFF;color:#5A5DC9}
.sortbtn.is-active{border-color:#2E3192;background:#2E3192;color:#FFFFFF}