/* ==================================================
   CERT DISPLAY
================================================== */


/* ? CERT GRID */
.mw-cert-grid {
  max-width: 640px;
}

/* ? HEADER ALIGNMENT */
.mw-cert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

/* ? META GRID (THIS IS THE BIG ONE) */
.mw-cert-card .mw-machine-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 16px;
}

/* ? OPTIONAL: tighten rows */
.mw-cert-card .mw-meta-row span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

.mw-cert-card .mw-meta-row strong {
  display: block;
  margin-top: 2px;
}


/* ==================================================
   MW UI SYSTEM
   COMPONENTS + SIZES + COLORS
================================================== */



/* ==================================================
   BASE COMPONENTS
================================================== */

.ui-pill,
.ui-badge,
.ui-circle {

    display:inline-flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;
    white-space:nowrap;

    font-weight:600;
    line-height:1;

    transition:all .2s ease;

    -webkit-appearance:none;
    appearance:none;

}



/* ==================================================
   COMPONENT TYPES
================================================== */

/* ------------------------------------------
   PILL
------------------------------------------ */

.ui-pill{
    border-radius:999px;
}



/* ------------------------------------------
   BADGE
------------------------------------------ */

.ui-badge{

    border-radius:10px;
    text-transform:uppercase;
    letter-spacing:.08em;

}



/* ------------------------------------------
   CIRCLE
------------------------------------------ */

.ui-circle{

    border-radius:50%;

    font-weight:700;
    flex-shrink:0;

}



/* ==================================================
   SIZE SYSTEM
================================================== */

/* ------------------------------------------
   XS
------------------------------------------ */

.ui-xs{

    font-size:11px;
    padding:4px 8px;

}



/* ------------------------------------------
   SMALL
------------------------------------------ */

.ui-sm{

    font-size:12px;
    padding:5px 10px;

}



/* ------------------------------------------
   MEDIUM
------------------------------------------ */

.ui-md{

    font-size:13px;
    padding:8px 16px;

}



/* ------------------------------------------
   LARGE
------------------------------------------ */

.ui-lg{

    font-size:15px;
    padding:10px 18px;

}



/* ==================================================
   CIRCLE SIZES
================================================== */

.ui-circle.ui-xs{

    width:22px;
    height:22px;
    padding:0;

}



.ui-circle.ui-sm{

    width:28px;
    height:28px;
    padding:0;

}



.ui-circle.ui-md{

    width:36px;
    height:36px;
    padding:0;

}



.ui-circle.ui-lg{

    width:48px;
    height:48px;
    padding:0;

}



/* ==================================================
   BRAND COLORS
================================================== */

/* ------------------------------------------
   BLUE
------------------------------------------ */

.ui-blue{

    background:#DDE8EF;
    color:#003B5C;

}



/* ------------------------------------------
   GOLD
------------------------------------------ */

.ui-gold{

    background:#F4E8C6;
    color:#8A6708;

}



/* ------------------------------------------
   TEAL
------------------------------------------ */

.ui-teal{

    background:#DCEBE7;
    color:#004E42;

}



/* ------------------------------------------
   CLAY
------------------------------------------ */

.ui-clay{

    background:#EFE4DE;
    color:#8A6757;

}



/* ------------------------------------------
   GRAY
------------------------------------------ */

.ui-gray{

    background:#ECECEC;
    color:#666666;

}



/* ==================================================
   SYSTEM COLORS
================================================== */

/* ------------------------------------------
   SUCCESS
------------------------------------------ */

.ui-success{

    background:#DFF2E8;
    color:#0F6A3D;

}



/* ------------------------------------------
   WARNING
------------------------------------------ */

.ui-warning{

    background:#FFF3D6;
    color:#9C6B00;

}



/* ------------------------------------------
   DANGER
------------------------------------------ */

.ui-danger{

    background:#F8DFDF;
    color:#9B2F2F;

}



/* ==================================================
   OPTIONAL EFFECTS
================================================== */

/* Checkmark */

.ui-check::before{

    content:"✓";
    margin-right:6px;

}



/* Glass */

.ui-glass{

    background:rgba(255,255,255,.14);

    border:1px solid rgba(255,255,255,.18);

    color:#ffffff;

    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);

}



/* ==================================================
   HOVER
================================================== */

.ui-pill:hover,
.ui-badge:hover,
.ui-circle:hover{

    transform:translateY(-1px);
    opacity:.92;

}



/* ==================================================
   WRAPPERS
================================================== */

.ui-group{

    display:flex;
    flex-wrap:wrap;
    gap:10px;

}

/* ==========================================
   LEGACY COMPATIBILITY
========================================== */

.ui-pill--blue{
    background:#DDE8EF;
    color:#003B5C;
}

.ui-pill--gold{
    background:#F4E8C6;
    color:#8A6708;
}

.ui-pill--teal{
    background:#DCEBE7;
    color:#004E42;
}

.ui-pill--gray{
    background:#ECECEC;
    color:#666666;
}

.ui-pill--white{
    background:#ffffff;
    color:#111111;
}




/* ==========================================================================
   MOBILE MACHINE CAROUSEL
   ========================================================================== */


@media (max-width:1024px){

    .mw-mobile-machines{
        display:flex;
        flex-wrap:nowrap;
        overflow-x:auto;
        overflow-y:hidden;

        gap:24px;
        padding:0 20px 20px;

        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
    }

    .mw-mobile-machines::-webkit-scrollbar{
        display:none;
    }

    .mw-mobile-machine{
        min-width:95%;
        flex-shrink:0;

        scroll-snap-align:center;

        min-height:auto !important;
        height:auto !important;
    }

    /* STACK POWER + BEST FOR */

    .mw-mobile-machine .mw-hero-data{
        display:flex;
        flex-direction:column;
        gap:24px;
    }

    .mw-mobile-machine .mw-hero-power{
        width:100%;
    }

    .mw-mobile-machine .mw-hero-bestfor{
        width:100%;
        border-left:none !important;
        padding-left:0 !important;
        margin-left:0 !important;
    }

}