/* Styled STB frontend (restored) */
#stb-root {
    margin: 20px 80px;
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    color: #3b2f2a;
    padding: 18px
}

.stb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 18px 0
}

.stb-card {
    background: #ead6cc;
    border-radius: 12px;
    padding: 18px;
    position: relative;
    cursor: pointer;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.04)
}

.stb-card.selected {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08)
}

.stb-card-empty {
    background: transparent;
    box-shadow: none;
    opacity: 0.2
}

.stb-card-top {
    display: flex;
    flex-direction: column
}

.stb-qty {
    font-size: 28px;
    font-weight: 800
}

.stb-label {
    font-size: 12px;
    color: #5b4b44
}

.stb-price {
    font-weight: 800;
    font-size: 18px;
    color: #3b2f2a
}

.stb-badge {
    position: absolute;
    right: 12px;
    top: 12px;
    background: #4b3b35;
    color: #fff;
    padding: 8px;
    border-radius: 8px;
    font-size: 12px
}

.stb-controls {
    margin-top: 20px;
    text-align: center
}

.stb-counter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px
}

.stb-counter button {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: #fff;
    cursor: pointer
}

.stb-qty-input {
    width: 140px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    text-align: center;
    font-weight: 700
}

.stb-total-line,
.stb-odds-line {
    font-weight: 700;
    margin: 8px 0
}

.stb-continue-btn {
    background: #bda396;
    color: #fff;
    padding: 12px 28px;
    border-radius: 8px;
    border: none;
    font-weight: 800;
    cursor: pointer
}

.stb-step2 {
    padding: 18px;
    border-radius: 12px;
    margin-top: 20px
}

.stb-quiz-wrap {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 20px;
    align-items: flex-start
}

.stb-quiz-image img {
    max-width: 360px;
    border-radius: 8px
}

.stb-question-text {
    color: #e2d5c8 !important;
    font-size: 30px;
}

.stb-answers-list {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.stb-answer-btn {
    padding: 12px;
    border-radius: 8px;
    color: #e2d5c8 !important;
    border: 1px solid #e6d7cd;
    background: transparent;
    cursor: pointer;
    text-align: left
}

.stb-answer-btn.selected {
    background: #e6d7cd;
    color: #3b2f2a
}

.stb-quiz-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 12px
}

.stb-back {
    background: transparent;
    border: 1px solid #bda396;
    padding: 10px 18px;
    border-radius: 8px;
    color: #bda396;
    cursor: pointer
}

.stb-add-to-cart {
    background: #eae7dd;
    color: #4c4b42 !important;
    padding: 12px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer
}
.stb-add-to-cart:hover { background-color: #eae7dd !important;}




  .stb-card { background-color: #e2d5c8 !important; min-height: inherit !important;}
  .stb-card-top { display: flex !important; gap: 5px !important; flex-direction: row !important;
     align-items: center; }
  .stb-qty ,.stb-label { font-size: 20px !important; font-weight: normal !important;  text-transform: uppercase; letter-spacing: 0px !important;}
  .stb-price span { opacity: 1 !important; color: #4c4b42 !important;}
  .stb-card.selected {transform: translateY(0px) !important; 
    background-color: #cbb49d !important;
  }
  .stb-badge { background-color: #4c4b42 !important; width: 65px; height: 65px; border-radius: 50% !important; text-align: center; display: flex; justify-content: center; align-items: center;}
  #stb-continue { background-color: #e2d5c8 !important; color: #4c4b42 !important; border-radius: 7px; text-transform: uppercase; border: none !important; width: 400px; padding: 20px 0 ;}
  .qty-outer { border: solid 1px #e2d5c8 !important; padding: 15px !important; border-radius: 7px !important; display: inline-block;}
  .qty-outer button { border: none !important; color: #e2d5c8 !important;}
  .qty-outer .stb-qty { text-align: center !important; background: none !important; color: #e2d5c8 !important; border: none !important;}
  .stb-total, .stb-odds { font-size: 20px; color: #e2d5c8 !important; text-transform: uppercase !important; margin: 20px 0 ;}
  .stb-answers-list button { color: #e2d5c8 !important; border: solid 1px #e2d5c8 !important; border-radius: 7px !important; text-align: center;}
  .stb-answers-list button:hover { background: #e2d5c8 !important; color: #4c4b42 !important;}
  

.ansHint  {  text-transform: uppercase; padding: 20px 0 0 0 ;}
  .ansHintcontent, .ansHint { color: #e2d5c8 !important; text-align: center; font-size: 20px;} 
  .ansHintcontent { padding-bottom: 25px;}