/************************
MARKUP
************************/
.markup p {
    margin-bottom: var(--spacing-m);
}
.markup > *:last-child {
    margin-bottom: 0;
}
.markup a:not(.btn) {
    color: var(--color-primary);
    border-radius: calc(var(--border-radius) * 0.5);
    display: inline;
    padding: 0 var(--spacing-s);
    background: rgba(var(--background-primary), .1);
    transition: var(--transition);
}
.markup a:not(.btn):hover, .markup a:not(.btn):focus {
    color: var(--color-primary);
    background: rgba(var(--background-primary), .2);
}
.markup h1, .markup h2, .markup h3, .markup h4 {
    padding: var(--spacing-m) 0;
}
.markup img {
    max-width: 100%;
}
.markup img.fr-rounded {
    border-radius: calc(var(--border-radius) * 0.75);
}
.markup img.fr-shadow {
    box-shadow: 0px 12px 24px -12px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0px 12px 24px -12px rgba(0, 0, 0, 0.5);
}
.markup img.fr-bordered {
    padding: var(--border-width);
    border: var(--border);
    border-color: var(--color-title);
}
.panel--900 .markup img.fr-bordered, .modal--900 .markup img.fr-bordered {border-color: var(--background-700);}
.panel--700 .markup img.fr-bordered, .modal--700 .markup img.fr-bordered {border-color: var(--background-900);}
.markup table:not(.package__features) {
    width: 100%;
    border-radius: calc(var(--border-radius) * 0.75);
    border: var(--border);
    border-color: var(--background-900);
    border-collapse: separate;
    margin-bottom: var(--spacing-m);
}
.markup table:not(.package__features):last-child {
    margin-bottom: 0;
}
.panel--900 .markup table, .modal--900 .markup table {border-color: var(--background-700);}
.panel--700 .markup table, .modal--700 .markup table {border-color: var(--background-900);}
.markup table:not(.package__features) td {
    padding: var(--spacing-s);
    border-bottom: var(--border);
    border-color: var(--background-900);
    color: var(--color-text);
}
.markup table:not(.package__features) tr:last-child td {
    border-bottom: 0;
}
.panel--700 .markup table:not(.package__features) td {border-color: var(--background-900);}
.panel--900 .markup table:not(.package__features) td {border-color: var(--background-700);}
.markup table thead {
    background: var(--background-900);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    font-weight: normal;
}
.markup table th {
    padding: var(--spacing-s);
    text-transform: uppercase;
    font-size: .8rem;
    color: var(--color-text);
    opacity: .5;
}
.panel--700 .markup table thead, .modal--700 .markup table thead {background: var(--background-900);}
.panel--900 .markup table thead, .modal--900 .markup table thead {background: var(--background-700);}
.markup ul, .markup ol {
    padding-left: 3ch;
    color: var(--color-text);
    margin-bottom: var(--spacing-m);
}
.markup li {
    padding-left: .5ch;
}
.markup hr {
    border: var(--border);
    border-color: var(--background-700);
    border-bottom: 0;
    margin: 0 -1.5rem;
    margin-bottom: var(--spacing-m);
}
/*** CARD ***/
.markup .kg-card {
    border-radius: calc(.75*var(--border-radius));
    font-size: 1rem;
    padding: var(--spacing-l) var(--spacing-grid);
    margin-bottom: var(--spacing-grid);
}
.markup .kg-card:last-child {
    margin-bottom: 0;
}
/*** CALLOUT CARD ***/
.markup .kg-callout-card div.kg-callout-text {
    font-size: 1rem;
}
.markup .kg-callout-card-grey {
    background: var(--background-700);
    color: var(--color-title);
}
.markup .kg-callout-card-grey * {
    color: var(--color-title);
}
.markup .kg-callout-card-white {
    border: var(--border);
    border-color: var(--background-700);
    box-shadow: none;
    color: var(--color-text);
}
.markup .kg-callout-card-white * {
    color: var(--color-text);
}
.markup .kg-callout-card-yellow {
    background: rgb(255, 145, 25, .1);
    color: rgb(255, 145, 25);
}
.markup .kg-callout-card-yellow * {
    color: rgb(255, 145, 25);
}
.markup .kg-callout-card-red {
    background: rgb(255, 52, 52, .1);
    color: rgb(255, 52, 52);
}
.markup .kg-callout-card-red * {
    color: rgb(255, 52, 52);
}
.markup .kg-callout-card-blue {
    background: rgb(0, 183, 255, .1);
    color: rgb(0, 183, 255);
}
.markup .kg-callout-card-blue * {
    color: rgb(0, 183, 255);
}
.markup .kg-callout-card-green * {
    color: rgb(52, 183, 67);
}
.markup .kg-callout-card-pink * {
    color: rgb(225, 71, 174);
}
.markup .kg-callout-card-purple * {
    color: rgb(135, 85, 236);
}
/*** TOGGLE CARD ***/
.markup .kg-toggle-card {
    box-shadow: none;
    background: var(--background-700);
    padding: var(--spacing-grid);
    transition: opacity 1s ease,top .35s ease;
}
.markup .kg-toggle-card h4 {
    padding: 0;
    font-size: var(--font-size-header);
}
.markup .kg-toggle-heading {
    align-items: center;
}
.markup .kg-toggle-card-icon {
    padding: 0;
    margin: 0;
    height: auto;
    width: auto;
}
.markup .kg-toggle-card-icon svg {
    display: none;
}
.markup .kg-toggle-card-icon:after {
    display: inline-block;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
    content: "\f0da";
    font-size: 1rem;
    color: white;
    transition: var(--transition);
}
.kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-card-icon:after {
    transform: rotate(90deg);
}
.markup .kg-toggle-content {
    transition: none;
}
.markup .kg-toggle-card .kg-toggle-content ol, .markup .kg-toggle-card .kg-toggle-content p, .markup .kg-toggle-card .kg-toggle-content ul {
    opacity: 1;
    font-size: 1rem;
    margin: 0;
}
.markup .kg-toggle-content *:first-child {
    padding-top: var(--spacing-m);
}
.markup .kg-product-card h4.kg-product-card-title {
    font-family: var(--font-family);
}
.markup .kg-product-card .kg-product-card-description ol, .markup .kg-product-card .kg-product-card-description p, .markup .kg-product-card .kg-product-card-description ul {
    font-family: var(--font-family);
    opacity: 1;
}
.kg-toggle-card .kg-toggle-content ul, .kg-toggle-card .kg-toggle-content ol {
    line-height: 1em;
}
/*** IMAGE CARD ***/
.markup .kg-image-card {
    display: block;
    text-align: center;
    padding: 0;
    margin-bottom: var(--spacing-m);
    max-width: 100%;
    padding: var(--spacing-m) 0;
}
.markup .kg-image-card img {
    border-radius: calc(.75*var(--border-radius));
    max-width: 100%;
    height: auto;
    display: inline-block;
}
.kg-width-wide {}
.kg-width-full {}
/*** BOOKMARK CARD ***/
.markup .kg-bookmark-card {
    display: block;
    padding: 0;
    margin-bottom: var(--spacing-grid);
}
.markup .kg-bookmark-card a.kg-bookmark-container {
    padding: var(--spacing-grid);
    border: none;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-s);
    background: var(--background-700);
    gap: var(--spacing-grid);
}
.markup .kg-bookmark-card a.kg-bookmark-container:hover {
    padding: var(--spacing-grid);
    border: none;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-s);
    background: var(--background-700);
}
.markup .kg-bookmark-thumbnail {
    order: -1;
    border-radius: calc(.75*var(--border-radius));
    overflow: hidden;
}
.markup .kg-bookmark-thumbnail img {
    transition: var(--transition);
}
.markup .kg-bookmark-card a.kg-bookmark-container:hover .kg-bookmark-thumbnail img {
    transform: rotate(-2deg) scale(1.15);
}
.markup .kg-bookmark-content {
    padding: 0;
}
.markup .kg-bookmark-title {
    font-size: var(--font-size-header);
    color: var(--color-title);
}
.markup .kg-bookmark-description {
    font-size: var(--font-size);
    color: var(--color-text);
    opacity: 1;
}
.markup .kg-bookmark-metadata {
    font-size: var(--font-size);
    color: var(--color-title);
}
.markup .kg-bookmark-metadata>:not(img) {
    opacity: 1;
}
.markup .kg-bookmark-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: calc(.5*var(--border-radius));
}
.markup .kg-bookmark-publisher:before {
    display: inline-block;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
    content: "\f111" !important;
    color: var(--background-900);
    font-size: .5rem;
}
.markup figure figcaption {
    color: var(--color-text);
    text-transform: uppercase;
    font-weight: bold;
    font-size: .8rem;
    opacity: .5;
    text-align: center;
}
/*** BUTTON CARD ***/
.markup .kg-button-card {
    margin-bottom: var(--spacing-m);
}
.markup .kg-button-card a.kg-btn, .markup:not(.markup--staff) .kg-product-card a.kg-product-card-button {
    font-family: var(--font-family);
    font-weight: bold;
    font-size: 1rem;
    line-height: inherit;
    display: inline-block;
    margin: 0;
    padding: var(--spacing-m) var(--spacing-l);
    border: var(--border);
    border-radius: var(--border-radius);
    transition: var(--transition);
    height: auto;
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: rgba(var(--background-primary), .1);
    text-align: center;
}
.markup .kg-button-card a.kg-btn:hover, .markup:not(.markup--staff) .kg-product-card a.kg-product-card-button:hover {
    color: var(--color-primary);
    background: rgba(var(--background-primary), .2);
    opacity: 1;
}
/*** PRODUCT CARD ***/
.markup:not(.markup--staff) .kg-product-card-container {
    padding: var(--spacing-grid);
    box-shadow: none;
    background: var(--background-700);
    border-radius: var(--border-radius);
    max-width: 375px;
    grid-template-columns: 1fr;
    gap: 0;
}
.markup:not(.markup--staff) .kg-product-card-image {
    max-width: 100%;
    max-height: 150px;
    margin-bottom: var(--spacing-grid);
}
.markup:not(.markup--staff) .kg-product-card-title-container {
    text-align: center;
    width: 100%;
    background: var(--background-900);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    padding: var(--spacing-l);
    margin-bottom: var(--border-width);
}
.markup:not(.markup--staff) .kg-product-card h4.kg-product-card-title {
    font-size: 1rem;
    padding: 0;
    line-height: 1.5em;
}
.markup:not(.markup--staff) .kg-product-card-description {
    background: var(--background-900);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    padding: var(--spacing-grid);
    margin-bottom: var(--spacing-grid);
}
.markup:not(.markup--staff) .kg-product-card .kg-product-card-description p:not(:first-of-type) {
    margin-top: var(--spacing-s);
}
.markup:not(.markup--staff) .kg-product-card-description i.fa-solid {
    font-size: 1.25rem;
    transform: translateY(2px);
    margin-right: var(--spacing-s);
}
.markup:not(.markup--staff) .kg-product-card-description i.fa-circle-check {
    color: var(--color-success);
}
.markup:not(.markup--staff) .kg-product-card-description i.fa-circle-xmark {
    opacity: .5;
}
/************************
PAGES
************************/
/* PAGE: Staff */
.page--staff .markup {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-m);
}
.page--staff .markup > *:not(.kg-product-card) {
    grid-column: span 3;
}
.page--staff .markup .kg-product-card {
    padding: var(--spacing-m);
    margin: 0;
    overflow: hidden;
    background: var(--background-900);
    border-radius: var(--border-radius);
    display: block;
}
.page--staff .markup .kg-product-card-container {
    max-width: 100%;
    min-height: 2.5rem;
    height: 100%;
    box-shadow: none;
    display: grid;
    gap: 0;
    grid-template-columns: auto 1fr;
    align-items: center;
    padding: 0;
    position: relative;
}
.page--staff .markup .kg-product-card-title-container h4 {
    font-size: var(--font-size-header);
    padding: 0;
    margin-left: var(--spacing-m);
}
.page--staff .markup .kg-product-card-description * {
    font-size: var(--font-size);
}
.page--staff .markup .kg-product-card-description *:first-child {
    text-transform: uppercase;
    font-weight: bold;
    font-size: .8rem;
    grid-row-start: 2;
    grid-row-end: 3;
    transform: translateY(.25rem);
    margin-left: var(--spacing-m);
}
.page--staff .markup .kg-product-card-description:nth-child(3) *:first-child {
    transform: none;
}
.page--staff .markup .kg-product-card-description *:not(:first-child) {
    display: none;
}
.page--staff .markup .kg-product-card-container img {
    display: block;
    grid-row: span 2;
    grid-column: initial;
    width: 3rem;
    height: 3rem;
    border-radius: calc(var(--border-radius)*.75);
    justify-self: initial;
    background: var(--background-700);
}
.page--staff .markup .kg-product-card-title-container, .page--staff .markup .kg-product-card-description {
    grid-column: initial;
}
.page--staff .markup .kg-product-card-button {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    height: 100%;
    width: auto;
    padding: 0 1.25rem;
    border-radius: calc(var(--border-radius)*.75);
    background: var(--background-700);
}
.page--staff .markup .kg-product-card-button i {
    color: var(--color-title);
    opacity: .5;
}
.page--staff .markup .kg-product-card-button:hover {
    background: var(--background-700);
}
.page--staff .markup .kg-product-card-button:hover i {
    color: var(--color-title);
    opacity: 1;
}
.page--staff .markup .kg-product-card-rating {
    display: none;
}

@media only screen and (max-width: 1200px) {
    .page--staff .markup {
        grid-template-columns: repeat(2, 1fr);
    }
    .page--staff .markup > *:not(.kg-product-card) {
        grid-column: span 2;
    }
}
@media only screen and (max-width: 1000px) {
    .page--staff .markup {
        grid-template-columns: 1fr;
    }
    .page--staff .markup > *:not(.kg-product-card) {
        grid-column: initial;
    }
}