/* =========================================================
   BEST SELLERS PAGE
   ========================================================= */


/* =========================================================
   HEADER STATE
   ========================================================= */

.best-sellers-page .site-header {
    color: var(--ink);
    border-bottom-color: var(--line);
}

.best-sellers-page .announcement-bar + .site-header {
    background: transparent;
}


/* =========================================================
   HERO
   ========================================================= */

.bestseller-hero {
    position: relative;

    width: 100%;
    min-height: 100vh;
    padding-top: 146px;

    overflow: hidden;

    background: var(--sand);
    color: var(--ink);
}

.bestseller-hero-inner {
    min-height: calc(100vh - 146px);

    padding-top: 55px;
    padding-bottom: 45px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bestseller-hero-top {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--muted);

    font-family: var(--display);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bestseller-hero-title {
    width: 100%;
    padding: 50px 0;

    font-family: var(--display);
    font-size: clamp(5rem, 10.5vw, 11rem);
    font-weight: 500;
    line-height: 0.74;
    letter-spacing: -0.08em;
}

.bestseller-title-line {
    display: flex;
    align-items: baseline;
    gap: 2vw;

    overflow: hidden;
}

.bestseller-title-indent {
    padding-left: 25vw;
}

.bestseller-title-word,
.bestseller-title-serif {
    display: block;
}

.bestseller-title-serif {
    font-family: var(--serif);
    font-size: 0.73em;
    font-weight: 400;
    font-style: italic;
    letter-spacing: -0.035em;
}

.bestseller-hero-bottom {
    width: 100%;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
}

.bestseller-hero-bottom p {
    width: min(390px, 35vw);
    margin: 0;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.75;
}

.bestseller-hero-bottom a {
    display: inline-flex;
    align-items: center;
    gap: 16px;

    color: var(--ink);

    font-family: var(--display);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bestseller-hero-bottom a > span {
    width: 46px;
    height: 46px;

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

    border: 1px solid var(--ink);
    border-radius: 50%;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.35s var(--ease);
}

.bestseller-hero-bottom a:hover > span {
    background: var(--ink);
    color: var(--paper);

    transform: translateY(5px);
}


/* =========================================================
   NUMBER ONE
   ========================================================= */

.bestseller-number-one {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: var(--paper);
}

.bestseller-one-grid {
    min-height: 900px;

    display: grid;
    grid-template-columns: 58% 42%;
}

.bestseller-one-image {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: var(--paper-dark);
}

.bestseller-one-image > a {
    display: block;

    width: 100%;
    height: 100%;
}

.bestseller-one-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.9s var(--ease);
}

.bestseller-one-image:hover img {
    transform: scale(1.035);
}

.bestseller-one-rank {
    position: absolute;
    left: 35px;
    bottom: 25px;

    color: var(--white);

    font-family: var(--display);
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.07em;
}

.bestseller-one-content {
    position: relative;

    padding: 55px 4vw 60px;

    display: flex;
    flex-direction: column;

    background: var(--blue);
    color: var(--white);
}

.bestseller-one-meta {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: rgba(255, 255, 255, 0.55);

    font-family: var(--display);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.bestseller-one-copy {
    margin: auto 0;
}

.bestseller-kicker {
    display: block;

    margin-bottom: 30px;

    color: rgba(255, 255, 255, 0.58);

    font-family: var(--display);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bestseller-one-copy h1 {
    margin: 0;

    font-family: var(--display);
    font-size: clamp(4rem, 6.5vw, 7rem);
    font-weight: 500;
    line-height: 0.79;
    letter-spacing: -0.07em;
}

.bestseller-one-copy h1 em {
    display: inline-block;

    padding-left: 7vw;

    font-family: var(--serif);
    font-weight: 400;
    font-style: italic;
    letter-spacing: -0.025em;
}

.bestseller-one-copy > p {
    max-width: 330px;
    margin: 45px 0 38px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 11px;
    line-height: 1.75;
}


/* =========================================================
   NUMBER ONE BUY
   ========================================================= */

.bestseller-one-buy {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bestseller-one-price {
    margin-right: 15px;

    font-family: var(--display);
    font-size: 18px;
    font-weight: 500;
}

.bestseller-add {
    min-width: 185px;
    min-height: 48px;
    padding: 0 17px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border: 1px solid rgba(255, 255, 255, 0.55);

    color: var(--white);

    cursor: pointer;

    font-family: var(--display);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.bestseller-add:hover {
    background: var(--white);
    color: var(--blue);
}

.bestseller-add i {
    font-size: 15px;
}

.bestseller-wishlist {
    width: 48px;
    height: 48px;

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

    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;

    color: var(--white);

    cursor: pointer;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.bestseller-wishlist:hover {
    background: var(--white);
    color: var(--blue);

    transform: scale(1.06);
}

.bestseller-wishlist.is-active {
    background: var(--white);
    color: var(--blue);
}


/* =========================================================
   PRODUCTS
   ========================================================= */

.bestseller-products {
    position: relative;

    padding: 140px 0 165px;

    background: var(--paper);
}

.bestseller-products-head {
    padding-bottom: 35px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid var(--line);
}

.bestseller-product-tools {
    display: flex;
    align-items: center;
    gap: 35px;
}

.bestseller-product-tools > span {
    color: var(--muted);

    font-family: var(--display);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.bestseller-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--ink);

    cursor: pointer;

    font-family: var(--display);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.bestseller-filter-trigger i {
    font-size: 13px;

    transition: transform 0.35s var(--ease);
}

.bestseller-filter-trigger:hover i {
    transform: rotate(90deg);
}


/* =========================================================
   FILTER BAR
   ========================================================= */

.bestseller-filter-bar {
    padding: 24px 0;

    display: flex;
    align-items: center;
    gap: 30px;

    border-bottom: 1px solid var(--line);
}

.bestseller-filter {
    position: relative;

    padding: 0 0 5px;

    color: var(--muted);

    cursor: pointer;

    font-family: var(--display);
    font-size: 10px;
    font-weight: 500;
}

.bestseller-filter::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background: var(--ink);

    transition: width 0.35s var(--ease);
}

.bestseller-filter:hover,
.bestseller-filter.active {
    color: var(--ink);
}

.bestseller-filter:hover::after,
.bestseller-filter.active::after {
    width: 100%;
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

.bestseller-grid {
    margin-top: 85px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 85px 2vw;
    align-items: start;
}

.bestseller-card {
    position: relative;

    min-width: 0;
}

.bestseller-card-offset {
    margin-top: 70px;
}

.bestseller-card-featured {
    grid-column: span 2;
}


/* =========================================================
   PRODUCT MEDIA
   ========================================================= */

.bestseller-card-media {
    position: relative;

    width: 100%;
    aspect-ratio: 0.76;

    overflow: hidden;

    background: var(--paper-dark);
}

.bestseller-card-featured .bestseller-card-media {
    aspect-ratio: 1.35;
}

.bestseller-card-media > a {
    display: block;

    width: 100%;
    height: 100%;
}

.bestseller-card-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.8s var(--ease);
}

.bestseller-card:hover .bestseller-card-media img {
    transform: scale(1.045);
}


/* =========================================================
   RANK
   ========================================================= */

.bestseller-rank {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;

    min-width: 39px;
    min-height: 39px;

    padding: 0 8px;

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

    background: var(--ink);
    color: var(--white);

    font-family: var(--display);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.bestseller-badge {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;

    padding: 8px 11px;

    background: var(--sand);
    color: var(--ink);

    font-family: var(--display);
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* =========================================================
   WISHLIST
   ========================================================= */

.bestseller-card .wishlist-button {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 3;

    width: 39px;
    height: 39px;

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

    border-radius: 50%;

    background: var(--paper);
    color: var(--ink);

    cursor: pointer;

    font-size: 15px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.35s var(--ease);
}

.bestseller-card .wishlist-button:hover {
    transform: scale(1.08);
}

.bestseller-card .wishlist-button.is-active {
    background: var(--ink);
    color: var(--white);
}


/* =========================================================
   QUICK ADD
   ========================================================= */

.bestseller-card .quick-add {
    position: absolute;
    right: 12px;
    bottom: 12px;
    left: 12px;
    z-index: 3;

    min-height: 46px;
    padding: 12px 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: var(--paper);
    color: var(--ink);

    cursor: pointer;

    font-family: var(--display);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    transform: translateY(calc(100% + 20px));

    transition:
        transform 0.45s var(--ease),
        background 0.3s ease,
        color 0.3s ease;
}

.bestseller-card:hover .quick-add {
    transform: translateY(0);
}

.bestseller-card .quick-add:hover {
    background: var(--ink);
    color: var(--white);
}

.bestseller-card .quick-add i {
    font-size: 15px;
}


/* =========================================================
   PRODUCT INFO
   ========================================================= */

.bestseller-card-info {
    padding-top: 17px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.bestseller-type {
    display: block;

    margin-bottom: 5px;

    color: var(--muted);

    font-family: var(--display);
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.bestseller-card-info h2 {
    margin: 0;

    font-family: var(--display);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.025em;
}

.bestseller-card-info h2 a {
    color: var(--ink);
}

.bestseller-price {
    flex: 0 0 auto;

    padding-top: 2px;

    font-family: var(--display);
    font-size: 11px;
    font-weight: 500;
}


/* =========================================================
   STATEMENT
   ========================================================= */

.bestseller-statement {
    position: relative;

    min-height: 900px;
    padding: 70px 0;

    display: flex;

    overflow: hidden;

    background: var(--ink);
    color: var(--white);
}

.bestseller-statement-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bestseller-statement-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: rgba(255, 255, 255, 0.48);

    font-family: var(--display);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.11em;
}

.bestseller-statement-title {
    padding: 80px 0;

    font-size: clamp(4.7rem, 9.5vw, 10rem);
    line-height: 0.77;
    letter-spacing: -0.075em;
}

.bestseller-statement-line {
    overflow: hidden;
}

.bestseller-statement-line span {
    display: block;

    font-family: var(--display);
    font-weight: 500;
}

.bestseller-statement-line em {
    display: block;

    font-family: var(--serif);
    font-weight: 400;
    font-style: italic;
    letter-spacing: -0.03em;
}

.bestseller-statement-indent {
    padding-left: 26vw;
}

.bestseller-statement-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.bestseller-statement-bottom p {
    width: min(350px, 35vw);
    margin: 0;

    color: rgba(255, 255, 255, 0.58);

    font-size: 11px;
    line-height: 1.75;
}

.bestseller-statement-bottom a {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: var(--white);

    font-family: var(--display);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bestseller-statement-bottom a i {
    font-size: 14px;

    transition: transform 0.35s var(--ease);
}

.bestseller-statement-bottom a:hover i {
    transform: translate(5px, -5px);
}


/* =========================================================
   EDITORIAL
   ========================================================= */

.bestseller-editorial {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: var(--sand);
}

.bestseller-editorial-grid {
    min-height: 900px;

    display: grid;
    grid-template-columns: 58% 42%;
}

.bestseller-editorial-image {
    width: 100%;
    height: 100%;

    overflow: hidden;
}

.bestseller-editorial-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.bestseller-editorial-content {
    position: relative;

    padding: 60px 4vw;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bestseller-editorial-number {
    font-family: var(--display);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.bestseller-editorial-content h2 {
    margin: 0;

    font-family: var(--display);
    font-size: clamp(3.8rem, 6.3vw, 6.8rem);
    font-weight: 500;
    line-height: 0.78;
    letter-spacing: -0.07em;
}

.bestseller-editorial-content h2 em {
    display: inline-block;

    font-family: var(--serif);
    font-weight: 400;
    font-style: italic;
    letter-spacing: -0.025em;
}

.bestseller-editorial-content p {
    max-width: 320px;
    margin: 40px 0 30px;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.75;
}


/* =========================================================
   MARQUEE
   ========================================================= */

.bestseller-marquee {
    position: relative;

    width: 100%;
    padding: 55px 0;

    overflow: hidden;

    background: var(--blue);
    color: var(--white);
}

.bestseller-marquee-track {
    width: max-content;

    display: flex;
    align-items: center;
    gap: 30px;

    white-space: nowrap;

    will-change: transform;
}

.bestseller-marquee-track span,
.bestseller-marquee-track em {
    display: block;

    font-size: clamp(3.5rem, 7vw, 7rem);
    line-height: 0.9;
}

.bestseller-marquee-track span {
    font-family: var(--display);
    font-weight: 500;
    letter-spacing: -0.065em;
}

.bestseller-marquee-track em {
    font-family: var(--serif);
    font-weight: 400;
    font-style: italic;
    letter-spacing: -0.025em;
}

.bestseller-marquee-track i {
    display: block;

    font-size: 14px;
    font-style: normal;
}


/* =========================================================
   LARGE TABLET
   ========================================================= */

@media (max-width: 1199.98px) {

    .bestseller-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bestseller-card-featured {
        grid-column: span 2;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .bestseller-hero {
        padding-top: 124px;
    }

    .bestseller-hero-inner {
        min-height: calc(100vh - 124px);

        padding-top: 45px;
        padding-bottom: 35px;
    }

    .bestseller-hero-title {
        font-size: clamp(4rem, 11vw, 7rem);
    }

    .bestseller-title-indent {
        padding-left: 17vw;
    }

    .bestseller-one-grid {
        min-height: 760px;

        grid-template-columns: 55% 45%;
    }

    .bestseller-one-content {
        padding: 45px 3vw;
    }

    .bestseller-products {
        padding: 110px 0 130px;
    }

    .bestseller-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 70px 3vw;
    }

    .bestseller-card-offset {
        margin-top: 0;
    }

    .bestseller-card-featured {
        grid-column: span 2;
    }

    .bestseller-card-featured .bestseller-card-media {
        aspect-ratio: 1.7;
    }

    .bestseller-statement {
        min-height: 760px;
    }

    .bestseller-editorial-grid {
        min-height: 750px;

        grid-template-columns: 55% 45%;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .best-sellers-page .site-header {
        top: 30px;
    }

    .best-sellers-page .site-header.is-fixed {
        top: 0;
    }


    /* Hero */

    .bestseller-hero {
        min-height: 680px;
        padding-top: 106px;
    }

    .bestseller-hero-inner {
        min-height: calc(100vh - 106px);

        padding-top: 35px;
        padding-bottom: 28px;
    }

    .bestseller-hero-top span:last-child {
        display: none;
    }

    .bestseller-hero-title {
        padding: 45px 0;

        font-size: clamp(3.6rem, 15vw, 6rem);
        line-height: 0.8;
    }

    .bestseller-title-line {
        gap: 10px;
    }

    .bestseller-title-indent {
        padding-left: 8vw;
    }

    .bestseller-hero-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px;
    }

    .bestseller-hero-bottom p {
        width: 90%;
        max-width: 350px;
    }


    /* Number One */

    .bestseller-one-grid {
        min-height: auto;

        grid-template-columns: 1fr;
    }

    .bestseller-one-image {
        height: 70vh;
        min-height: 500px;
    }

    .bestseller-one-rank {
        left: 18px;
        bottom: 18px;
    }

    .bestseller-one-content {
        min-height: 650px;

        padding: 35px 18px 55px;
    }

    .bestseller-one-copy h1 {
        font-size: clamp(3.8rem, 15vw, 6rem);
    }

    .bestseller-one-copy h1 em {
        padding-left: 10vw;
    }

    .bestseller-one-buy {
        flex-wrap: wrap;
    }

    .bestseller-one-price {
        width: 100%;
        margin: 0 0 8px;
    }


    /* Products */

    .bestseller-products {
        padding: 85px 0 100px;
    }

    .bestseller-products-head {
        align-items: flex-start;
    }

    .bestseller-product-tools > span {
        display: none;
    }

    .bestseller-filter-bar {
        gap: 22px;

        overflow-x: auto;

        white-space: nowrap;

        scrollbar-width: none;
    }

    .bestseller-filter-bar::-webkit-scrollbar {
        display: none;
    }

    .bestseller-grid {
        margin-top: 60px;

        grid-template-columns: 1fr;
        gap: 60px;
    }

    .bestseller-card-featured {
        grid-column: auto;
    }

    .bestseller-card-media,
    .bestseller-card-featured .bestseller-card-media {
        aspect-ratio: 0.82;
    }

    .bestseller-card .quick-add {
        transform: translateY(0);
    }


    /* Statement */

    .bestseller-statement {
        min-height: 680px;

        padding: 45px 0;
    }

    .bestseller-statement-title {
        padding: 70px 0;

        font-size: clamp(3.8rem, 15vw, 6rem);
        line-height: 0.82;
    }

    .bestseller-statement-indent {
        padding-left: 12vw;
    }

    .bestseller-statement-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 28px;
    }

    .bestseller-statement-bottom p {
        width: 90%;
        max-width: 330px;
    }


    /* Editorial */

    .bestseller-editorial-grid {
        min-height: auto;

        grid-template-columns: 1fr;
    }

    .bestseller-editorial-image {
        height: 70vh;
        min-height: 500px;
    }

    .bestseller-editorial-content {
        min-height: 650px;

        padding: 35px 18px 60px;
    }

    .bestseller-editorial-content h2 {
        font-size: clamp(3.8rem, 15vw, 6rem);
    }


    /* Marquee */

    .bestseller-marquee {
        padding: 45px 0;
    }

    .bestseller-marquee-track {
        gap: 20px;
    }

    .bestseller-marquee-track span,
    .bestseller-marquee-track em {
        font-size: clamp(3rem, 15vw, 5rem);
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .bestseller-hero-title {
        font-size: 14vw;
    }

    .bestseller-title-serif {
        font-size: 0.72em;
    }

    .bestseller-one-copy h1 {
        font-size: 14vw;
    }

    .bestseller-add {
        flex: 1;

        min-width: 0;
    }

    .bestseller-card-info {
        gap: 12px;
    }

    .bestseller-card-info h2 {
        font-size: 13px;
    }

    .bestseller-price {
        font-size: 10px;
    }

    .bestseller-statement-title {
        font-size: 14vw;
    }

    .bestseller-editorial-content h2 {
        font-size: 14vw;
    }

}