/*tokens*/
body {
    /*colors*/
    color-scheme: light dark;

    --base: #fff, #000;
    --subtle: #eee, #444;
    --medium: #bbb, #bbb;
    --muted: #777, #ccc;
    --main: #000, #fff;
    --translucent: #ffffffCC, #000000CC;
    --deal_blue: #215D82, #75BFFF;

    /*size*/
    --xs: 8px;
    --s: 16px;
    --m: 24px;
    --l: 48px;
    --status-bar: 40px;
    --nav: 64px;
    --footer: 80px;
    --width: 390px;
    --height: 844px;

    /*font*/
    --arial: Arial, Helvetica, sans-serif;
    --georgia: Georgia, 'Times New Roman', Times, serif;
}

@font-face {
    font-family: "Pin Sans";
    src: url("assets/fonts/Pin-Sans-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+000-5FF;
}

@font-face {
    font-family: "Pin Sans";
    src: url("assets/fonts/Pin-Sans-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+000-5FF;
}

@font-face {
    font-family: "Graphik";
    src: url("assets/fonts/Graphik-BlackItalic.otf") format("opentype");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
    unicode-range: U+000-5FF;
}

.graphik_italic {
    font-family: "Graphik", system-ui, -apple-system, sans-serif;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -0.7px;
    text-transform: uppercase;
}

@font-face {
    font-family: "Graphik";
    src: url("assets/fonts/Graphik-Black.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+000-5FF;
}

.graphik {
    font-family: "Graphik", system-ui, -apple-system, sans-serif;
    font-weight: 900;
    font-style: normal;
    letter-spacing: -0.7px;
    text-transform: uppercase;
}

@font-face {
    font-family: "Publico Banner Condensed";
    src: url("assets/fonts/PublicoBannerCondensed-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-stretch: condensed;
    font-display: swap;
    unicode-range: U+000-5FF;
}

.publico_light {
    font-family: "Publico Banner Condensed", serif;
    font-weight: 300;
    font-style: normal;
    font-stretch: condensed;
    text-transform: uppercase;
}

/*fontstyle*/
body {
    font-family: "Pin Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: var(--m);
    background-color: light-dark(var(--base));
    color: light-dark(var(--main));
}

/*links*/
a {
    color: light-dark(var(--main));
    text-decoration: none;
    cursor: inherit;
}

/*container*/
body {
    display: flex;
    justify-content: center;
    background-color: light-dark(var(--subtle));
    cursor: url('assets/cursor.svg') 30 30, auto;
    margin: 8px;
}

.container {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: var(--width);
    height: var(--height);
    background-color: light-dark(var(--base));
    border-radius: 24px;
    overflow: hidden;
}

main {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
}

*::-webkit-scrollbar {
    display: none;
}

/*nav*/
#status_bar {
    z-index: 3;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    box-sizing: border-box;
    padding: 0 24px;
    min-height: var(--status-bar);
    font-family: "SF Pro Display", sans-serif;
    font-size: 17px;
    line-height: 22px;
    font-weight: 500;
    filter: invert(0);
    background: light-dark(var(--base));
}

#status-bar_icons {
    display: flex;
    gap: 8px;
    padding-bottom: 6px;
}

#nav_container {
    z-index: 2;
    height: auto;
}

#tabs_nav {
    display: flex;
    min-height: var(--nav);
    align-items: center;
    overflow: hidden;
    overflow-x: auto;
    /*box-shadow: 0 2px 6px #0000001F;*/
}

#tabs_nav ul {
    display: flex;
    gap: 16px;
    list-style: none;
    padding: 0 16px;
    margin: 0;
    height: auto;
    display: flex;
}

#tabs_nav li {
    display: flex;
    padding: 3px 0;
}

#tabs_nav li.selected,
#top_nav #selected {
    border-bottom: 2px solid light-dark(var(--main));
}

nav.actions {
    position: fixed;
    box-sizing: border-box;
    margin: 8px 4px;
    top: var(--status-bar);
    z-index: 2;
    width: auto;
    filter: invert(0);
    background: light-dark(var(--base));
}

#nav_sticky {
    display: none;
    position: absolute;
    top: 0;
    box-sizing: border-box;
    z-index: 2;
    width: var(--width);
    height: calc(var(--nav) + var(--status-bar));
    align-items: flex-end;
    background-color: light-dark(var(--base));
    padding: 0;
    margin: 0;
}

#nav_sticky div {
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    padding: 22px 52px;
}

#title_bar {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: flex-start;
    width: var(--width);
    height: 56px;
    padding: 0 20px;
    background: none;
    z-index: 2;
    gap: 16px;
}

#title_bar_content {
    display: none;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding-right: 36px;
}

#top_nav {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: var(--width);
    max-height: 20px;
    background-color: none;
    padding: 12px 4px 16px;
    gap: 12px;
    margin: 0;
    overflow: hidden;
    overflow-x: auto;
    z-index: 2;
}

#top_nav div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 20px;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

#top_nav div .thumbnail {
    display: none;
    width: 72px;
    aspect-ratio: 1;
    border-radius: 16px;
    object-fit: cover;
    background: lightgray;
    margin-bottom: 4px;
}

#top_nav .label {
    display: inline-flex;
    flex-direction: row;
    gap: 3px;
    width: auto;
    max-width: 100%;
    flex-shrink: 0;
    align-items: center;
    box-sizing: content-box;
    height: 16px;
    object-fit: contain;
    padding-bottom: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#top_nav .styled_font {
    text-transform: uppercase;
}

#title_bar_text {
    font-weight: 500;
}


/*amb module*/

#amb_module .amb_header {
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    padding: 0 16px;
}

#amb_cards {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    min-height: 172px;
    padding: 8px 4px 16px;
    box-sizing: border-box;
    gap: 4px;
    overflow: hidden;
    overflow-x: auto;
}

#amb_cards div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    height: auto;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

#amb_module div .thumbnail {
    width: 150px;
    aspect-ratio: 5/4;
    border-radius: 16px;
    object-fit: cover;
    background: lightgray;
    margin-bottom: 4px;
}

#amb_module .label {
    padding: 0 6px;
    font-size: 14px;
    font-weight: 500;
}

#amb_module .description {
    padding: 0 6px;
    font-size: 12px;
    font-weight: 400;
    color: light-dark(var(--muted));
}

/*footer*/
footer {
    display: flex;
    box-sizing: border-box;
    min-height: var(--footer);
    align-items: flex-start;
    justify-content: center;
    padding: 12px 38px;
    gap: 45px;
}

footer div,
.icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: auto;
}

footer div img {
    height: 24px;
    width: 24px;
    object-fit: contain;
}

/*grid*/
#grid,
#grid_top,
#grid_bottom {
    column-count: 2;
    column-gap: 4px;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    margin: 0;
    padding: 0 4px 16px;
    background-color: light-dark(var(--base));
    z-index: 1;
}

/*pin*/
.pin {
    break-inside: avoid;
    margin-bottom: 16px;
    overflow: hidden;
}

.pin:hover {}

.pin .media {
    position: relative;
    width: 100%;
    display: block;
    border-radius: 16px;
    overflow: hidden;
}

.media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.pin .metadata {
    display: flex;
    box-sizing: border-box;
    align-items: flex-start;
    width: 100%;
    gap: 4px;
    padding: 6px 6px 0 6px;
}

.pin .metadata ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    width: auto;
    gap: 2px;
    font-size: 12px;
    line-height: 14px;
}

.metadata .menu-icon {
    line-height: 8px;
    flex-shrink: 0;
}

.metadata .brand {
    font-weight: 500;
}

.metadata .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
}

.metadata .deal {
    font-weight: 500;
    color: #215D82;
}

.metadata .deal_text {
    font-weight: 500;
    color: light-dark(var(--deal_blue));
}

.metadata .discounted {
    text-decoration: line-through;
    color: light-dark(var(--muted));
}

.pin .metadata-attribution {
    display: flex;
    align-items: center;
    gap: 2px;
    color: light-dark(var(--muted));
}

/*pin decorators*/
.chin {
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    gap: 2px;
    min-height: 24px;
    height: auto;
    background-color: light-dark(var(--subtle));
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
}

.cta_metadata {
    font-weight: 500;
    color: #215D82;
}

.deal_badge {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 14p;
    background-color: light-dark(var(--translucent));
    color: light-dark(var(--main));
    border-radius: 0 0 16px 0;
}

/*deal board*/
body {
    /*colors*/
    color-scheme: light dark;

    --pre_thanksgiving: #7F5206, #FEF1BE;
    --thanksgiving: #776F0D, #F9F3B9;
    --black_friday: #186250, #C0F2E5;
    --black_friday_weekend: #1A5866, #BDEEF5;
    --cyber_monday: #223077, #C4CDF8;
    --december_gifts: #4D6813, #E0EFC3;
    --daily_loop: #444116, #FBF8DA;
    --weekly_edit: #4A3410, #FEF6DC;
}

#board-headline {
    position: relative;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 4px;
    min-height: 234px;
    background-size: cover;
    background-position: center;
    padding: 16px;
    color: #fff;
}

#board-headline::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 100%);
}

#board-headline h1 {
    display: flex;
    flex-direction: column;
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
    margin: 0;
    z-index: 1;
    gap: 2px;
}

.deal_tag {
    font-family: "Graphik", system-ui, -apple-system, sans-serif;
    font-size: 40px;
    line-height: 100%;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

#board-headline p {
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    margin: 0;
    color: light-dark(var(--base));
    z-index: 1;
}

@media screen and (max-width: 440px) {
    body {
        --status-bar: 0px;
    }

    body {
        margin: 0;
        height: 100vh;
        width: 100vw;
    }

    .container {
        border-radius: 0;
        width: 100%;
        height: 100%;
    }

    #status_bar {
        display: none;
    }

    footer {
        min-height: auto;
    }
}