/**************************************************************************************************************/
/***** ARCHIVE ITEMS ******************************************************************************************/
/**************************************************************************************************************/
/***************************/
/* [Item] ******************/
/***************************/
.item{
    width: 100%;
    position: relative;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
}
.item__content{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-200);
}

.item__label:empty,
.item__title:empty,
.item__subtitle:empty,
.item__content > *:empty{
    display: none;
}
.item__title{
	font-family: var(--ff-heading);
	line-height: var(--lh-heading);
	color: var(--color-heading);
    /* letter-spacing: var(--ls-heading); */
    /* text-transform: uppercase; */
}
.item__description{
    font-family: var(--ff-text);
    line-height: var(--lh-text);
    color: var(--color-text)
}
.item__description *{
    color: inherit;
}

.item__description b,
.item__description strong{
    font-family: var(--ff-700);
}
.actions,
.item__actions{
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: var(--gap-400);
    row-gap: var(--gap-400);
    flex-wrap: wrap;
}
.item__thumbnail{
    position: relative;
    overflow: hidden;
}
.item__thumbnail img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--trans-image);
}
.item__title,
.item__description{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lines, 0);
    line-clamp: var(--lines, 0);
    overflow: hidden;
}
@media(max-width:767px){
    .actions,
    .item__actions{
        column-gap: var(--gap-300);
        row-gap: var(--gap-300);
    }
    .item__title{--lines: 0;}
    .item__description{--lines: 0;}
}

/********************************/
/* [Item] Icon List *************/
/********************************/
.item--card .item__thumbnail{
    border-radius: var(--br);
}
.item--card .item__thumbnail img{
    aspect-ratio: var(--image-aspect-ratio-lp);
}
.item--card .item__content{
    margin-top: var(--gap-500);
    gap: var(--gap-200);
}

/***********************************/
/* Registration Card Device Result */
/***********************************/
.item.item--device-result .card{
    width: 100%;
    padding: var(--gap-800);
    background-color: var(--init-background-alt);
    border-radius: var(--br-elements);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-500);
    text-align: center;
}
.item.item--device-result .item__label{
    font-family: var(--ff-text);
    text-transform: none;
}


/**************************************************************************************************************/
/***** HEROS **************************************************************************************************/
/**************************************************************************************************************/
/********************************/
/* [Component] Hero *************/
/********************************/
[data-component="hero"]{
    margin-top: var(--height-header);
    /* padding-top: calc(var(--height-header) + var(--gutter)); */
    padding-top: var(--gutter);
    padding-bottom: 0px;
    padding-bottom: var(--gutter);
    position: relative;
    min-height: var(--height-hero-default, 500px);
    display: flex;
}
[data-component="hero"],
[data-component="hero"] .item__title{
    color: var(--color-heading);
}
[data-component="hero"] .item__description{
    color: var(--color-text);
}

/* Hero with Background Image */
[data-component="hero"]:has([data-widget="background-image"]){
    isolation: isolate;
}
[data-component="hero"]:has([data-widget="background-image"]) [data-widget="background-image"] picture{
    position: relative;
}
/* [data-component="hero"]:has([data-widget="background-image"]) [data-widget="background-image"] picture:before{
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--image-overlay);
} */

@media(min-width: 1025px){
    [data-component="hero"] .item__description{
        max-width: var(--col-8);
    }
}

[data-widget="request-response"]{
    display: flex;
    flex-direction: column;
    gap: var(--gap-800);
}


/*********************************************/
/* [Component][Hero] Default *****************/
/*********************************************/
[data-component="hero"][data-type="default"]{
    display: flex;
    align-items: center;
    background-color: var(--init-background-alt);
}
[data-component="hero"][data-type="default"] [data-widget="page-header"] .item__description{
    max-width: var(--col-8);
}
@media(max-width: 1024px){
    [data-component="hero"][data-type="default"]{
        padding-block: calc(0.5 * var(--height-header) + var(--gutter));
    }
    [data-component="hero"][data-type="default"]{
        text-align: center;
    }
    [data-component="hero"][data-type="default"] .item__actions{
        justify-content: center;
    }
}
@media(min-width: 1025px){
    [data-component="hero"][data-type="default"] [data-widget="page-header"] .item:has(.item__content + .item__actions) {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: var(--gutter);
    }
}

/*********************************************/
/* [Component][Hero] Normal ******************/
/*********************************************/
/* [data-component="hero"][data-type="normal"]{
    min-height: var(--height-hero-normal, 500px);
    padding-bottom: var(--gap-global);
} */



/*********************************************/
/* [Component][Hero] Jumbo *******************/
/*********************************************/
/* Hero Slider */
[data-component="hero"][data-type="jumbo"]{
    min-height: var(--height-hero-jumbo, 500px);
    padding-top: calc(2 * var(--height-header));
    padding-bottom: calc(3 * var(--height-header));
    margin-top: 0;
}

[data-component="hero"][data-type="jumbo"] .item__content{
    max-width: var(--col-6);
}
[data-component="hero"][data-type="jumbo"] .item__title,
[data-component="hero"][data-type="jumbo"] .item__label,
[data-component="hero"][data-type="jumbo"] .item__description{
    text-align: center;
}

[data-component="hero"][data-type="jumbo"] .item__title{
    color: var(--color-heading);
}
[data-component="hero"][data-type="jumbo"] .item__label,
[data-component="hero"][data-type="jumbo"] .item__description{
    color: var(--color-text);
}
[data-component="hero"][data-type="jumbo"] .item__actions{
    margin-top: var(--gap-400);
    justify-content: center;
}
[data-component="hero"][data-type="jumbo"] .item__actions .btn,
[data-component="hero"][data-type="jumbo"] .item__actions a.btn {
    min-width: 220px;
}

@media(min-width: 1025px){
    [data-component="hero"][data-type="jumbo"]{
        min-height: var(--height-hero-jumbo, 500px);
        padding-top: calc(1 * var(--height-header) + var(--gutter));
        padding-bottom: calc(0 * var(--height-header) + var(--gutter));
    }
    [data-component="hero"][data-type="jumbo"] .container{
        display: flex;
        align-items: center;
    }
    [data-component="hero"][data-type="jumbo"] .item__title,
    [data-component="hero"][data-type="jumbo"] .item__label,
    [data-component="hero"][data-type="jumbo"] .item__description{
        text-align: left;
    }
    [data-component="hero"][data-type="jumbo"] .item__actions{
        justify-content: flex-start;
    }
}



/**************************************************************************************************************/
/***** COMPONENTS *********************************************************************************************/
/**************************************************************************************************************/
[data-component] header,
[data-component] footer{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* gap: var(--gap-600); */
}

[data-component][data-text-align="center"],
[data-widget][data-text-align="center"]{
    text-align: center;
}
[data-component][data-text-align="center"] .actions,
[data-widget][data-text-align="center"] .actions{
    justify-content: center;
}

@media(max-width: 1024px){
    [data-component] [data-widget]:has(+ [data-widget="image"]) {order: 2;}
    [data-component] [data-widget] + [data-widget="image"] {order: 1;}

    [data-component] [data-widget="image"]:has(+ [data-widget="image"]) {order: 1;}
    [data-component] [data-widget="image"] + [data-widget="image"] {order: 2;}
}

/********************************/
/* [Component] Main *************/
/********************************/
main{
    position: relative;
}

/********************************/
/* [Component] Page Builder *****/
/********************************/
/* main, */
[data-component="hero"] + section[data-component="page-builder"]{
    margin-top: 0;
}

section[data-component="page-builder"]{
    margin-top: var(--height-header);
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap-global);
}
section[data-component="page-builder"] > [data-component]{
    padding-block: 0;
    padding-inline: var(--padding-container-inline);
}
section[data-component="page-builder"] > [data-component]:first-child{
    padding-top: calc(var(--gap-global) * 1.0);
}
section[data-component="page-builder"] > [data-component]:last-of-type{
    padding-bottom: calc(var(--gap-global) * 1.0);
}
section[data-component="page-builder"] > [data-component="faq"]{
    padding-block: var(--gap-global);
}
section[data-component="page-builder"] > [data-component="form-steps-wizard"]:first-child{
    padding-block: calc(var(--gap-global) * 0.5);
}

@media(max-width: 1024px){
    /* Specific Components*/
    section[data-component="page-builder"] > [data-component="promo-articles"]:has([data-widget="swiper"]){
        padding-inline: 0;
    }
    section[data-component="page-builder"] > [data-component="promo-articles"]:has([data-widget="swiper"]) [data-widget="section-header"],
    section[data-component="page-builder"] > [data-component="promo-articles"]:has([data-widget="swiper"]) .swiper{
        padding-inline: var(--padding-container-inline);
    }
}

/********************************/
/* [Component] FAQ **************/
/********************************/
section[data-component="faq"],
section[data-component="form-steps-wizard"]{
    background-color: var(--init-background-alt);
}

@media(max-width: 1024px){
    section[data-component="form-steps-wizard"] [data-widget="section-header"]{
        margin-bottom: var(--gap-600);
    }
}

/********************************/
/* [Component] Steps Navigation */
/********************************/
section[data-component="steps-navigation"],
section[data-component="steps-navigation"] + section[data-component]{
    margin-top: calc(-1 * var(--gap-global));
}
section[data-component="steps-navigation"] nav{
    width: 100%;
    height: var(--gap-global);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
section[data-component="steps-navigation"] nav a.btn.btn--link.btn--icon .btn__icon svg path{
    fill: var(--color-text-grey);
}
section[data-component="steps-navigation"] nav a.btn.btn--link.btn--icon .btn__label{
    color: var(--color-text-grey);
}



/********************************/
/* [Component] Single Order *****/
/********************************/
section[data-component="single-order"] .container{
    display: flex;
    flex-direction: column;
    gap: var(--gap-800);
}

/**************************************************************************************************************/
/***** WIDGETS ************************************************************************************************/
/**************************************************************************************************************/
/************************************/
/* [Widget] Section Header **********/
/************************************/
[data-widget="section-header"]{
    margin-bottom: var(--gap-500);
    text-align: center;
}
[data-widget="section-header"] header *:empty{
    display: none;
}
[data-widget="section-header"] header .item__actions{
    margin-top: var(--gap);
}
[data-widget="section-header"] header .item__subtitle,
[data-widget="section-header"] header .item__subtitle p{
    font-size: var(--fs-500);
}

/* Header With Actions */
[data-widget="section-header"] header:has(.item__content + .item__actions) .item__actions{
    display: none;
}
@media(min-width: 1025px){
    [data-widget="section-header"]{
        margin-bottom: var(--gap-700);
    }
    /* Header With Actions */
    [data-widget="section-header"] header:has(.item__content + .item__actions){
        display: grid;
        grid-template-columns: 1fr auto;
        gap: var(--gutter);
        align-items: end;
    }
    [data-widget="section-header"] header:has(.item__content + .item__actions) .item__actions{
        margin-top: 0;
        display: flex;
    }
}

/************************************/
/* [Widget] Section Footer **********/
/************************************/
[data-widget="section-footer"] .item__actions{
    margin-top: var(--gap-500);
    width: 100%;
    display: flex;
    justify-content: center;
    gap: var(--gutter);
}
@media(min-width:1025px){
    [data-widget="section-footer"] .item__actions{
        margin-top: var(--gap-600);
        justify-content: flex-end;
    }
}

/************************************/
/* [Widget] Page Header *************/
/************************************/
[data-widget="page-header"] .item{
    gap: var(--gap-500);
}
[data-widget="page-header"] .item__content{
    gap: var(--gap);
}
[data-widget="page-header"] .item__description{
    width: 100%;
    max-width: var(--col-5);
}

/************************************/
/* [Widget] Page Content ************/
/************************************/
[data-widget="page-content"] .content h1:not(:first-child),
[data-widget="page-content"] .content h2:not(:first-child),
[data-widget="page-content"] .content h3:not(:first-child),
[data-widget="page-content"] .content h4:not(:first-child),
[data-widget="page-content"] .content h5:not(:first-child),
[data-widget="page-content"] .content h6:not(:first-child){
    margin-top: calc(var(--gap-global) * 0.5);
}


/************************************/
/* [Widget] Content *****************/
/************************************/
[data-widget="content"] .item__content{
    max-width: var(--container);
    gap: var(--gap);
}
[data-widget="content"] .item__actions{
    margin-top: var(--gap);
}

/************************************/
/* [Widget] Image *******************/
/************************************/
[data-widget="image"]{
    position: relative;
}
[data-widget="image"] img{
    object-fit: cover;
}

/************************************/
/* [Widget] Background Image ********/
/************************************/
[data-widget="background-image"]{
    position: absolute;
    top: 0;
    left: 0;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}
[data-widget="background-image"] picture,
[data-widget="background-image"] picture img{
    width: 100%;
    height: 100%;
}
[data-widget="background-image"] img{
    object-fit: cover;
}

/************************************/
/* [Widget] Banner ******************/
/************************************/
[data-widget="banner"] .item{
    display: grid;
    grid-template-columns: 1fr;
    border-radius: var(--br-700);
    overflow: hidden;
}
[data-widget="banner"] .item__thumbnail picture,
[data-widget="banner"] .item__thumbnail img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
[data-widget="banner"] .item__content{
    background-color: var(--color-white);
    padding-block: var(--gap-700);
    padding-inline: var(--gap-500);
    justify-content: center;
}
[data-widget="banner"] .item__actions{
    margin-top: var(--gap-500);
}
@media(max-width: 1024px){
    [data-widget="banner"] .item__thumbnail img{
        aspect-ratio: var(--image-aspect-ratio-lp);
    }
}
@media(min-width: 1025px){
    [data-widget="banner"] .item{
        grid-template-columns: 5fr 7fr;
    }
    [data-widget="banner"] .item__content{
        padding-inline: var(--gap-700);
    }
}

/************************************/
/* [Widget] Steps Wizard ************/
/************************************/
[data-widget="steps-wizard"]{
    display: flex;
}
[data-widget="steps-wizard"] .item--step-wizard{
    --size: 42px;
    --gap: 20px;
    align-items: center;
}
[data-widget="steps-wizard"] .item--step-wizard .item__label,
[data-widget="steps-wizard"] .item--step-wizard .item__title{
    color: var(--color-text-grey);
}
[data-widget="steps-wizard"] .item--step-wizard .item__label{
    display: none;
}
[data-widget="steps-wizard"] .item--step-wizard .item__title{
    display: none;
    font-size: var(--fs-h4);
}
[data-widget="steps-wizard"] .item--step-wizard .item__thumbnail{
    display: flex;
    margin-bottom: var(--gap-200);
}
[data-widget="steps-wizard"] .item--step-wizard .item__thumbnail svg{
    width: var(--size);
    height: var(--size);
}
[data-widget="steps-wizard"] .item--step-wizard svg g{opacity: 0;}
[data-widget="steps-wizard"] .item--step-wizard[data-status="active"] svg g.active,
[data-widget="steps-wizard"] .item--step-wizard[data-status="complete"] svg g.complete,
[data-widget="steps-wizard"] .item--step-wizard[data-status="inactive"] svg g.inactive{
    opacity: 1;
}
[data-widget="steps-wizard"] .item--step-wizard[data-status]{
    pointer-events: none;
}

[data-widget="steps-wizard"] .item--step-wizard[data-status="active"] > *,
[data-widget="steps-wizard"] .item--step-wizard[data-status="complete"] > *{
    pointer-events: all;
}
[data-widget="steps-wizard"] .item--step-wizard[data-status="active"] .item__label,
[data-widget="steps-wizard"] .item--step-wizard[data-status="active"] .item__title{
    display: flex;
    color: var(--color-heading);
}
@media(max-width: 767px){
    [data-widget="steps-wizard"]{
        justify-content: center;
        gap: min(8vw,var(--gutter-600));
    }
    [data-widget="steps-wizard"] .item--step-wizard{
        width: var(--size);
        margin-inline: 0;
    }
    [data-widget="steps-wizard"] .item--step-wizard .item__label::before{
        content: unset;
    }
    [data-widget="steps-wizard"] .item--step-wizard .item__label{
        position: absolute;
        width: var(--size);
        height: var(--size);
        justify-content: center;
    }
    [data-widget="steps-wizard"] .item--step-wizard[data-status="active"] .item__label{
        color: var(--color-text-white);
    }
    [data-widget="steps-wizard"] .item--step-wizard .item__title{
        font-size: var(--fs-text);
        white-space: nowrap;
    }
}
@media(min-width: 768px){
    [data-widget="steps-wizard"] .item--step-wizard{
        --size: 46px;
    }
    [data-widget="steps-wizard"] .item--step-wizard:not(:last-child)::before,
    [data-widget="steps-wizard"] .item--step-wizard:not(:last-child)::after{
        content: '';
        height: 3px;
        position: absolute;
        top: calc(0.5 * var(--size));
        left: calc(50% + 0.5 * var(--size) + var(--gap));
        width: calc(100% - var(--size) - 2 * var(--gap));
    }
    [data-widget="steps-wizard"] .item--step-wizard:not(:last-child)::before{
        background-color: #CDD4F0;
    }
    [data-widget="steps-wizard"] .item--step-wizard[data-status="active"]:not(:last-child)::after{
        width: calc((100% - var(--size) - 2 * var(--gap)) / 2);
        background-color: var(--color-accent);
    }
    [data-widget="steps-wizard"] .item--step-wizard[data-status="complete"]:not(:last-child)::before{
        background-color: var(--color-secondary);
    }
    [data-widget="steps-wizard"] .item--step-wizard .item__thumbnail{
        margin-bottom: var(--gap);
    }
    [data-widget="steps-wizard"] .item--step-wizard .item__label{
        display: flex;
        font-family: var(--ff-text);
    }
    [data-widget="steps-wizard"] .item--step-wizard .item__label:not(:empty){
        margin-bottom: var(--gap-100);
    }
    [data-widget="steps-wizard"] .item--step-wizard .item__label,
    [data-widget="steps-wizard"] .item--step-wizard .item__title{
        display: flex;
    }
}

/************************************/
/* [Widget] Table *******************/
/************************************/
[data-widget="table"]{
    display: flex;
    flex-direction: column;
    gap: var(--gap-500);
}
[data-widget="table"] .grid-column{
    display: flex;
}
[data-widget="table"] .grid-column,
[data-widget="table"] .grid-column span{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
[data-widget="table"] .table__header,
[data-widget="table"] .table__body .item--table{
    display: grid;
    grid-template-columns: var(--grid-table-columns, 1fr);
    align-items: center;
    gap: var(--gap-200);
}
[data-widget="table"] .table__header{
    padding-bottom: var(--gap);
    border-bottom: var(--border);
}
[data-widget="table"] .table__header .grid-column{
    font-family: var(--ff-text);
    font-size: var(--fs-200);
    color: var(--color-text-grey-500, var(--color-text-grey));
    text-transform: uppercase;
}
[data-widget="table"] .table__body{
    display: flex;
    flex-direction: column;
}
[data-widget="table"] .table__body .item--table{
    padding-block: var(--gap-400);
    border-bottom: var(--border);
}

[data-widget="table"] .table__body .item--table .device_serial_number{
    display: flex;
    flex-direction: column;
}

/* Order Styling */
[data-widget="table"] .table__body .item--table .order_id{
    font-family: var(--ff-700);
    font-size: var(--fs-500);
}
[data-widget="table"] .table__body .item--table .user_name,
[data-widget="table"] .table__body .item--table .device_address{
    color: var(--color-text-grey-500);
}
[data-widget="table"] .table__body .item--table .order_status span{
    display: inline-block;
    padding-block: var(--gap-100);
    padding-inline: var(--gap-400);
    border-radius: var(--br-elements);
    background-color: var(--color-accent);
    color: var(--color-text-white);
    text-transform: uppercase;
    cursor: default;
    font-size: var(--fs-200);
}
[data-widget="table"] .table__body .item--table[data-order-status="pending"] .order_status span,
[data-widget="table"] .table__body .item--table[data-order-status="in-progress"] .order_status span,
[data-widget="table"] .table__body .item--table[data-order-status="complete"] .order_status span{
    color: var(--color-text-grey-500);
}
[data-widget="table"] .table__body .item--table[data-order-status="pending"] .order_status span{
    background-color: #D9D9D9;
}
[data-widget="table"] .table__body .item--table[data-order-status="in-progress"] .order_status span{
    background-color: #E9CDA5;
}
[data-widget="table"] .table__body .item--table[data-order-status="complete"] .order_status span{
    background-color: #BFE0B9;
}

/* Actions */
[data-widget="table"] .table__body .item--table .order_actions a{
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--init-background-alt);
    border-radius: 50%;
}
[data-widget="table"] .table__body .item--table .order_actions a,
[data-widget="table"] .table__body .item--table .order_actions a svg path{
    transition: var(--trans);
}
[data-widget="table"] .table__body .item--table .order_actions a:hover,
[data-widget="table"] .table__body .item--table .order_actions a:focus{
    background-color: var(--color-accent);
}
[data-widget="table"] .table__body .item--table .order_actions a:hover svg path,
[data-widget="table"] .table__body .item--table .order_actions a:focus svg path{
    fill: var(--color-white);
}
@media(max-width: 1024px){
    [data-widget="table"] .table__header{
        display: none;
    }

    [data-widget="table"] .table__body{
        gap: var(--gutter)
    }
    [data-widget="table"] .table__body .item--table{
        padding-block: var(--gutter-600);
        padding-inline: var(--gap-500);
        background-color: var(--color-white);
        border-radius: var(--br-elements);
        border: 0;

        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-areas:
            'id id status status status actions'
            'serial serial serial serial type type'
            'date date date date date date'
            'name name name name name name'
            'address address address address address address'
        ;
        row-gap: var(--gap-300);
    }
    [data-widget="table"] .table__body .item--table .order_id{
        grid-area: id;
    }
    [data-widget="table"] .table__body .item--table .order_status{
        grid-area: status;
    }
    [data-widget="table"] .table__body .item--table .order_actions{
        grid-area: actions;
    }
    [data-widget="table"] .table__body .item--table .device_serial_number{
        grid-area: serial;
    }
    [data-widget="table"] .table__body .item--table .order_request_type{
        grid-area: type;
    }
    [data-widget="table"] .table__body .item--table .order_date{
        grid-area: date;
    }
    [data-widget="table"] .table__body .item--table .user_name{
        grid-area: name;
    }
    [data-widget="table"] .table__body .item--table .device_address{
        grid-area: address;
    }
    [data-widget="table"] .table__body .item--table .order_status,
    [data-widget="table"] .table__body .item--table .order_actions,
    [data-widget="table"] .table__body .item--table .order_request_type{
        justify-content: flex-end;
    }
    [data-widget="table"] .table__body .item--table .device_serial_number,
    [data-widget="table"] .table__body .item--table .order_request_type{
        margin-top: var(--gap-400);
    }
    [data-widget="table"] .table__body .item--table .order_request_type{
        align-self: flex-start;
    }

}
@media(min-width: 1025px){
    [data-widget="table"]{
        --grid-table-columns: 130px 1fr 1fr 1.5fr 2fr 1.2fr 1fr 0.25fr;
    }
    [data-widget="table"] .item--table .grid-column.user_name{
        white-space: normal;
    }
}

/************************************/
/* [Widget] Device Card *************/
/************************************/
[data-widget="device-card"] .item{
    padding-block: var(--gutter-800);
    padding-inline: var(--gap-700);
    align-items: center;
    background-color: var(--init-background-alt);
    text-align: center;

}
[data-widget="device-card"] .item__thumbnail img{
    width: 100%;
    max-width: 180px;
    aspect-ratio: var(--image-aspect-ratio-sq);
    object-fit: contain;
}
[data-widget="device-card"] .item__content{
    margin-top: var(--gap-500);
}
[data-widget="device-card"] .item__label{
    font-family: var(--ff-text);
    font-size: var(--fs-text);
    text-transform: none;
}
[data-widget="device-card"] .item__title{
    font-size: var(--fs-h3);
}



/**************************************************************************************************************/
/***** UTILITIES **********************************************************************************************/
/**************************************************************************************************************/
/* Card */
.card{
    padding-block: var(--gap-700);
    padding-inline: var(--gap-700);
    background-color: var(--color-white);
    border-radius: var(--br-elements);
}
.card .item__title{
    color: var(--init-accent-400);
}


/**************************************************************************************************************/
/***** PAGE COMPONENT *****************************************************************************************/
/**************************************************************************************************************/


/**************************************************************************************************************/
/***** NOT SUPPORTING *****************************************************************************************/
/**************************************************************************************************************/
/* NOT Supports Clamp */
@supports (not (width: clamp(1px, 1px, 1px))) {

}