html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; font-family: "Source Sans 3", system-ui, sans-serif; }

button { text-decoration: none; }
button,input,select,textarea { font: inherit; }  

/* GLOBAL ---------- CORE ---------- BUTTON */
.oddButton { 
    position: relative; 
    overflow: hidden; 
    display: inline-flex; 
    align-items: center; 
    justify-content:center; 
    font-size: .875rem; 
    font-weight: 500; 
    letter-spacing: .015rem; 
    padding: .45rem 1rem; 
    text-transform: capitalize; 
    border-radius: 3px; 
    cursor: pointer; 
}
.primary { 
    background-color: #086eea; 
    color: #FFF; 
    text-shadow: 0 1px 1px hsla(200, 10%, 4%, 0.3); 
    border: 1px solid #006bd6; 
    box-shadow: hsla(210, 100%, 60%, 0.5) 0 1px 0 inset, hsla(210, 100%, 30%, 0.4) 0 -1px 0 1px inset, hsla(200, 10%, 4%, 0.1) 0 2px 4px 0; 
}
.primary svg path {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.oddButton.primary:hover { background-color: #0a73f3; border: 1px solid #076be5; }
.oddButton.primary svg { fill: #fff; }

.oddButton:disabled { 
    background-color: #f9f9f9; 
    border: 1px solid #ccc; 
    color: #777; 
    text-shadow: none; 
    box-shadow: none; 
    cursor:not-allowed; 
}
.oddButton:disabled:hover { background-color: #ddd;}

.to-top { transition: all 400ms; overflow: hidden; }
/* box-shadow: 0px 2px 3px 0 rgb(20 40 83 / 50%), 0px 2px 6px 0px rgb(20 40 83 / 50%), 0px 1px 4px 0px rgb(20 40 83 / 50%); */
.to-top.active { border-color: #086eea;}

/* BUTTON: Subtle Drop Shadow */
.oddButton.secondary { box-shadow:0 0 0 1px #0a428718; background-color: #FFF; color: #444; border: 1px solid #e5e5ec; }
.oddButton.secondary:hover { color: #222; border: 1px solid #b9b8bd; }

.odd-product__actions .oddButton,.oddButton.download { gap: .5rem;}
.oddButton i,.oddButton.download { display: flex;}
.oddButton.secondary i svg { fill: #086eea;}

button#product-cart-card { display: flex; width:100%;}


/* PRODUCT CARD */
.cardTitle { font-size: 1.15rem;}
.product-card .core-badge { background: rgba(0, 0, 0, .05); color: #111; font-size: .65rem; font-weight: 500; border-radius:2px; overflow: hidden;}
.product-card .free-badge { 
    position: absolute; top: 1rem; left: 1rem;
    z-index: 900; 
    background: rgba(0, 0, 0, .05);
    color: #111; 
    font-size: .65rem; font-weight: 500;
    border-radius:2px; overflow: hidden;
}
.product-card .free-badge,.product-card .core-badge { align-items: center; padding: .28rem .55rem; border: 1px solid transparent; line-height: 1; white-space: nowrap; }
.product-card .free-badge::after,.product-card .core-badge::after { content:''; position: absolute; top: 0; left: 0; width: 100%; height: 50%; background-color: rgba(255, 255, 255, .15); }

/* PREVIEW: Stage, Demo, Panel */
.oddStage,.oddDemo { background-color: transparent; }
/* .oddStage,.oddDemo { background-color: #f5f7f9; } */
.oddDemo { width: 100%; max-width: 1024px; min-height: 100svh; max-height: 768px; margin: auto; position: relative; display: flex; align-items: center; justify-content: center; }
.oddPanel { background-color: #FFFFFF; border:1px solid #e5e5ec; border-radius:4px; padding: 1rem; max-width: 88%; box-shadow: 0 0 8px rgb(52 54 78 / 10%); }