main > :is(.vlx-block,.vlx-header):not(:is(.vlx-block--auth,[class*="vlx-block--dash"])):first-child { margin-top:var(--navbar-height); }


/*** Headers ***/
.vlx-header { position: relative; }

/** Header > Home **/
.vlx-header.vlx-header--home { min-height: calc(80vh - var(--navbar-height)); display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: var(--bg-clr); }
.vlx-header.vlx-header--home .vlx-text > *:is(h1,h2,h3) { --lh: 1.25; text-align: center; color: var(--accent); }
.vlx-header.vlx-header--home .vlx-text > *:not(h1,h2,h3,:is(ul, ol) li) { --fs: var(--fs-h6); }
.vlx-header.vlx-header--home * { text-align: center; }
.vlx-header.vlx-header--home .vlx-icon { --w: 60px; --h: 60px; --clr: var(--accent); position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); opacity: .7; }

.vlx-header.vlx-header--home:has(.vlx-container-bg) .vlx-text > *:not(h1,h2,h3) { --clr-text: var(--text-clr-invert); }


/** Header > Subpage **/
.vlx-header.vlx-header--subpage { min-height: calc(40vh - var(--navbar-height)); display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: var(--bg-clr); }
.vlx-header.vlx-header--subpage *:is(h1,h2,h3) { --lh: 1.25; text-align: center; color: var(--accent); }






/*** Blocks ***/
.vlx-block__header { margin-bottom: 32px; }


/** Blocks > Text **/
.vlx-block--text { }
.vlx-block--text h2 { max-width: 80%; margin-bottom: 8px; }
.vlx-block--text * + h2 { margin-top: 16px; }
.vlx-block--text:not(:has(.d-grid)) p { max-width: 80%; }
.vlx-block--text .btn.btn--link { --fs: var(--fs-medium); color: var(--accent); }
.vlx-block--text .vlx-text * + * { margin-bottom: 8px; }
.vlx-block--text .vlx-text img { display: none; }


/** Blocks > Text Image **/
.vlx-block--text-image { }
.vlx-block--text-image .container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }

.vlx-block--text-image h2 { max-width: 80%; margin-bottom: 16px; }
.vlx-block--text-image p { max-width: 80%; }
.vlx-block--text-image .btn.btn--link { --fs: var(--fs-medium); color: var(--accent); }
.vlx-block--text-image .vlx-text { display: flex; justify-content: center; flex-direction: column; }
.vlx-block--text-image .vlx-text p:not(:last-of-type) { margin-bottom: 32px; }
.vlx-block--text-image .vlx-text img { display: none; }

.vlx-block--text-image .vlx-image { width: 100%; height: 100%; max-height: 500px; }
.vlx-block--text-image .vlx-image__img { width: 100%; height: 100%; max-height: 500px; border-radius: 16px; object-fit: cover; object-position: center; }

.vlx-detail--product .vlx-block--text-image .vlx-image__img { object-fit: contain; }

@media (min-width:1200px) {
    .vlx-block--text-image :is(h2,p) { max-width: unset; }
}


/** Blocks > Table **/
.vlx-block--table { display: flex; flex-direction: column; gap: 16px; }
.vlx-block--table .vlx-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; transition: opacity .3s; }
.vlx-block--table .vlx-row :is(input,select) { background: var(--bg-clr-dark); padding: 4px; border-radius: var(--border-radius-small); border: unset; outline: unset; --ff: var(--font-code); }
.vlx-block--table .vlx-row.--loading { opacity: .5; }


/** Tables **/
.vlx-table-wrapper { width: 100%; overflow-x: auto; }
.vlx-table { width: 100%; border-collapse: collapse; background: var(--bg-clr-light); border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, .04); }
.vlx-table thead th { background: var(--bg-clr); color: var(--text-clr); font-weight: 700; }
.vlx-table th,
.vlx-table td { padding: 12px 16px; border-bottom: 1px solid var(--bg-clr-dark); text-align: left; vertical-align: middle; }
.vlx-table tbody tr:hover td { background: var(--bg-clr); }
.vlx-table tfoot td { font-weight: 700; background: var(--bg-clr); }

.vlx-table--cart td:nth-child(1) { min-width: 220px; }
.vlx-table--cart :is(th, td):nth-child(2) { text-align: center; min-width: 80px; }
.vlx-table--cart :is(th, td):nth-child(3),
.vlx-table--cart :is(th, td):nth-child(4) { text-align: right; white-space: nowrap; }
.vlx-table--cart td:last-child { text-align: right; }
.vlx-table--cart .btn--link { padding: 0; }

@media (max-width: 640px) {
    .vlx-table th,
    .vlx-table td { padding: 10px 12px; }
}


/** Blocks > Products **/
.vlx-block--products { --gc: 1; }
.vlx-block--products .d-grid { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 16px; }
.vlx-block--products .vlx-block__header { display: flex; justify-content: space-between; align-items: center; }
.vlx-block--products .vlx-block__header :is(.vlx-form__box, .btn-group) { margin: unset !important; }
.vlx-block--products .vlx-block__header .btn.btn--small { min-width: 260px !important; }

/** Blocks > Products > @media **/
@media (min-width: 768px) {
    .vlx-block--products { --gc: 2; }
}
@media (min-width: 992px) {
    .vlx-block--products { --gc: 3; }
}
@media (min-width: 1200px) {
    .vlx-block--products { --gc: 4; }
}


/** Blocks > Cart **/
.vlx-block--cart { min-height: calc(100vh - var(--navbar-height)); }


/** Blocks > Errors **/
.vlx-block--error { height: 100vh; }
.vlx-block--error *:is(.container, .inner) { height: 100%; }
.vlx-block--error .text { text-align: center; }
.vlx-block--error .text h1 { --fs: 250px; }


/** Blocks > Maintance **/
.vlx-block--maintance { min-height: calc(100vh); display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: var(--bg-clr); background-size: cover; background-position: top; }
.vlx-block--maintance .vlx-text > *:is(h1,h2,h3) { --lh: 1.25; text-align: center; color: var(--accent); }
.vlx-block--maintance .vlx-text > *:not(h1,h2,h3,:is(ul, ol) li) { --fs: var(--fs-h6); }
.vlx-block--maintance * { text-align: center !important; }
.vlx-block--maintance .vlx-icon { --w: 60px; --h: 60px; --clr: var(--accent); position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); opacity: .7; }


/** Blocks > Auth **/
.vlx-block--auth { height: 100vh; width: 100%; display: grid; place-content: center; }


/** Blocks > Dash **/
.dash .vlx-block { min-height: 100vh; }

/** Blocks > Dash > Users **/
.vlx-block--dash-users { --gc: 1; }
.vlx-block--dash-users .vlx-block__header { display: flex; justify-content: space-between; align-items: center; }
.vlx-block--dash-users .vlx-block__header :is(.vlx-form__box, .btn-group) { margin: unset !important; }
.vlx-block--dash-users .vlx-block__header .btn.btn--small { min-width: 260px !important; }
.vlx-block--dash-users .d-grid { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 16px; }

/** Blocks > Dash > Roles **/
.vlx-block--dash-roles { --gc: 1; }
.vlx-block--dash-roles .vlx-block__header { display: flex; justify-content: space-between; align-items: center; }
.vlx-block--dash-roles .vlx-block__header :is(.vlx-form__box, .btn-group) { margin: unset !important; }
.vlx-block--dash-roles .vlx-block__header .btn.btn--small { min-width: 260px !important; }
.vlx-block--dash-roles .d-grid { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 16px; }

/** Blocks > Dash > Media **/
.vlx-block--dash-media { --gc: 1; }
.vlx-block--dash-media .vlx-block__header { display: flex; justify-content: space-between; align-items: center; }
.vlx-block--dash-media .vlx-block__header :is(.vlx-form__box, .btn-group) { margin: unset !important; }
.vlx-block--dash-media .vlx-block__header .btn.btn--small { min-width: 260px !important; }
.vlx-block--dash-media .d-grid { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 16px; }


/** Blocks > Dash > Pages **/
.vlx-block--dash-pages { --gc: 1; }
.vlx-block--dash-pages .d-grid { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 16px; }
.vlx-block--dash-pages .vlx-block__header { display: flex; justify-content: space-between; align-items: center; }
.vlx-block--dash-pages .vlx-block__header :is(.vlx-form__box, .btn-group) { margin: unset !important; }
.vlx-block--dash-pages .vlx-block__header .btn.btn--small { min-width: 260px !important; }


/** Blocks > Dash > Menus **/
.vlx-block--dash-menus { --gc: 1; }
.vlx-block--dash-menus .d-grid { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 16px; }
.vlx-block--dash-menus .vlx-block__header { display: flex; justify-content: space-between; align-items: center; }
.vlx-block--dash-menus .vlx-block__header :is(.vlx-form__box, .btn-group) { margin: unset !important; }
.vlx-block--dash-menus .vlx-block__header .btn.btn--small { min-width: 260px !important; }


/** Blocks > Dash > Productes **/
.vlx-block--dash-products { --gc: 1; }
.vlx-block--dash-products .d-grid { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 16px; }
.vlx-block--dash-products .vlx-block__header { display: flex; justify-content: space-between; align-items: center; }
.vlx-block--dash-products .vlx-block__header :is(.vlx-form__box, .btn-group) { margin: unset !important; }
.vlx-block--dash-products .vlx-block__header .btn.btn--small { min-width: 260px !important; }


/** Blocks > Dash > Orders **/
.vlx-block--dash-orders { --gc: 1; }
.vlx-block--dash-orders .d-grid { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 16px; }
.vlx-block--dash-orders .vlx-block__header { display: flex; justify-content: space-between; align-items: center; }
.vlx-block--dash-orders .vlx-block__header :is(.vlx-form__box, .btn-group) { margin: unset !important; }
.vlx-block--dash-orders .vlx-block__header .btn.btn--small { min-width: 260px !important; }

/** Blocks > Dash > Contact **/
.vlx-block--dash-contact { --gc: 1; }
.vlx-block--dash-contact .d-grid { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 16px; }


/** Blocks > Dash > @media **/
@media (min-width: 768px) {
    .vlx-block--dash-users { --gc: 2; }
    .vlx-block--dash-roles { --gc: 2; }
    .vlx-block--dash-media { --gc: 2; }
    .vlx-block--dash-pages { --gc: 2; }
    .vlx-block--dash-menus { --gc: 2; }
    .vlx-block--dash-products { --gc: 2; }
    .vlx-block--dash-orders { --gc: 2; }
    .vlx-block--dash-contact { --gc: 2; }
}
@media (min-width: 992px) {
    .vlx-block--dash-users { --gc: 3; }
    .vlx-block--dash-roles { --gc: 3; }
    .vlx-block--dash-media { --gc: 3; }
    .vlx-block--dash-pages { --gc: 3; }
    .vlx-block--dash-menus { --gc: 3; }
    .vlx-block--dash-products { --gc: 3; }
    .vlx-block--dash-orders { --gc: 3; }
    .vlx-block--dash-contact { --gc: 3; }
}
@media (min-width: 1200px) {
    .vlx-block--dash-users { --gc: 4; }
    .vlx-block--dash-roles { --gc: 4; }
    .vlx-block--dash-media { --gc: 4; }
    .vlx-block--dash-pages { --gc: 4; }
    .vlx-block--dash-menus { --gc: 4; }
    .vlx-block--dash-products { --gc: 4; }
    .vlx-block--dash-orders { --gc: 4; }
    .vlx-block--dash-contact { --gc: 4; }
}