body.admin-bar #haveInCollectionModal,
body.admin-bar #wantInCollectionModal {
    padding-top: 32px; /* Default admin bar height */
}

.thf_book_recommendations {
    width: 100%;
    position: relative;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-top: 56px;
    box-sizing: border-box;
    text-align: center;
    font-size: 45px;
    color: #000;
    font-family: "ITCAvantGardeGothic", Arial, Sans-Serif;
}

.recommendation-number-text {
    width: 54px;
    letter-spacing: 2.5px;
    line-height: 55px;
    margin-bottom: 32px;
}
.recommendation-caption {
    font-size: 28px;
    letter-spacing: 0.3px;
    line-height: 34px;
    font-family: 'Source Serif Pro', serif;
    margin-bottom: 32px;
}
.recommendation-lead-in {
    font-size: 45px;
    color: #000;
    font-family: "ITCAvantGardeGothic", Arial, Sans-Serif;
}
.recommendation-author-image-block {
    padding: 0px 0px 16px;
    box-sizing: border-box;
}
.recommendation-author-image {
    width: 130px;
    height: 130px;
    object-fit: cover;
}
.recommendation-subheading {
    font-size: 16px;    
    letter-spacing: 0.3px;
    line-height: 25px;
    font-family: 'Source Serif Pro', serif;
    color: #000;
    margin-bottom: 32px;
}
.recommendation-subheading p {
    font-size: 16px;
    font-weight: 400;
}
.recommendation-subheading p span {
    text-decoration: underline;
}
.recommendation-subheading p span a {
    border-bottom: none;
}
.recommendation-recipe-link {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    color: #333;
    font-family: 'Source Serif Pro', serif;
}

.recommendation-recipe-link a {
    color: #000;
    text-decoration: underline;
}

.recommendation-content {
    margin-bottom:32px;
    font-size: 18px;
}

.recommendation-content p {
    font-size: 18px;
    font-weight: 400;
}

.check-box-parent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.check-box-parent:focus-within {
    outline: none; /* Reset default */
}
/* Focus state on entire group 
.check-box-parent:focus,*/
.check-box-parent:focus-within:has(input:focus-visible) {
    outline: 2px solid #BBCDB5;
}

/* Hidden checkbox */
.check-box input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 2;
}

/* Container */
.check-box {
    position: relative;
    min-width: 21px;
    height: 21px;
    display: inline-block;
    margin-bottom: 0;
}

/* The visual box */
.check-box-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 21px;
    height: 21px;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 3px;
    transition: all 0.2s ease-in-out;
    z-index: 1;
}

/* Hover state — gray tick */
.check-box input[type="checkbox"]:hover + .check-box-child {
    background-image: url("data:image/svg+xml,%3Csvg fill='%23E3E2DB' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.629 13.233l-3.25-3.25 1.414-1.415L7.63 10.404l6.578-6.578 1.415 1.414z'/%3E%3C/svg%3E");
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
}


/* Checked state — yellow with black tick */
.check-box input[type="checkbox"]:checked + .check-box-child {
    background-color: #BBCDB5; /* Yellow */
    background-image: url('data:image/svg+xml;utf8,<svg fill="black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7.629 13.233l-3.25-3.25 1.414-1.415L7.63 10.404l6.578-6.578 1.415 1.414z"/></svg>');
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
    border-color: #BBCDB5;
}

.check-box #opt-in-newsletter-have:checked + .check-box-child,
.check-box #opt-in-newsletter-want:checked + .check-box-child {
    background-color: #fff; /* Yellow */
    background-image: url('data:image/svg+xml;utf8,<svg fill="black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7.629 13.233l-3.25-3.25 1.414-1.415L7.63 10.404l6.578-6.578 1.415 1.414z"/></svg>');
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
    border-color: #fff;
}


/* Focus (keyboard accessibility) — yellow outline */
.check-box input[type="checkbox"]:focus + .check-box-child,
.check-box input[type="checkbox"]:focus-visible + .check-box-child,
.recommendation-i-want-to-add:focus,
.recommendation-i-want-to-add:focus-visible,
.recommnedation-i-have-got:focus,
.recommnedation-i-have-got:focus-visible {

}

/* Label text */
.recommendation-i-want-to-add,
.recommendation-i-have-got {
    font-weight: 500;
    cursor: pointer;
    line-height: 20px;
    position: relative;
    letter-spacing : 0;
}

.if-you-like a{
    text-decoration: underline;
    color: #333;
}
.recommendation-if-you-like-container {
    align-self: stretch;
    position: relative;
    font-size: 12px;
    font-weight: 400;
    line-height: 21px;
    color: #333;
    font-family: 'Source Serif Pro', serif;
}
.add-to-list {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}
.ctas {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    text-align: left;
    font-size: 14px;
    color: #000;
    font-family: "ITCAvantGardeGothic", Arial, Sans-Serif;
}
.recommendation-end-line {
    background-image : url('data:image/svg+xml,utf8,<svg width="344" height="2" viewBox="0 0 344 2" fill="none" xmlns="http://www.w3.org/2000/svg"> <line x1="-0.000180166" y1="1.70215" x2="343.999" y2="0.782367" stroke="#E3E2DB" stroke-width="0.5"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 32px;
}

/* Container background and shadow */
.cookbook-container {
    background-color: #BBCDB5;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
    gap: 10px;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    height: 0;
}

/* Box styles */
.cookbook-box {
    height: 39px;
    outline: 1px solid black;
    outline-offset: -1px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
    gap: 4px;
    cursor: pointer;
    padding: 10px 8px;
}

/* Text styles */
.cookbook-text-pre,
.cookbook-text-post {
    color: black;
    font-size: 14px;
    font-family: 'Source Serif Pro', serif;
    font-weight: 400;
    line-height: 25px;
    word-wrap: break-word;
}

/* Number styles */
.cookbook-number-i-have,
.cookbook-number-i-want {
    width: 9px;
    text-align: center;
    color: black;
    font-size: 14px;
    font-family: 'ITCAvantGardeGothic', sans-serif;
    font-weight: 600;
    line-height: 25px;
    letter-spacing: 2.2px;
    flex-direction: column;
    justify-content: center;
    word-wrap: break-word;
}
/* Sidebar modal sliding from left in mobile view */
@media (max-width: 768px) {
    .recommendation-container {
        width: auto;
    }
    #wpadminbar{
        overflow: hidden;
    }
    #wpadminbar .quicklinks{
        display: flex;
    }

    #wpadminbar .quicklinks ul{
        display: flex;
    }
    #wp-admin-bar-wpseo-menu{
        position: relative;
    }
    #wp-admin-bar-wpseo-menu .wpseo-score-icon{
        position: absolute;
        top: -10px;
        right: -10px;
    }

    .recommendation-content,
    .recommendation-content p {
        font-size: 16px;
        font-weight: 400;
    }

    .right-modal.fade {
        width: 100%; /* Full width for mobile */
    }

    .right-modal.fade .modal-dialog {
        position: fixed;
        left: 0;
        margin: 0;
        height: 100%;
        transform: translateX(-100%);
        transition: transform 0.4s ease-out, opacity 0.15s linear;
        width: 100%;
        overflow-x: hidden; /* Prevent content from going out of viewport */
    }

    .right-modal.fade.show .modal-dialog {
        transform: translateX(0);
    }

    .right-modal .modal-content {
        height: 100%;
        border-radius: 0;
        overflow-x: hidden; /* Prevent content from going out of viewport */
    }

    .right-modal .modal-body {
        padding: 0;
        height: calc(100% - 96px); /* Adjust for header height */
        overflow-y: auto; /* Enable scrolling if content overflows */
        overflow-x: hidden; /* Prevent horizontal overflow */
    }

    .right-modal .modal-header {
        border-bottom: 0;
        align-self: stretch;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        padding: 56px 16px 16px;
        gap: 0px;
    }
    .right-modal .modal-thf-book-frame {
        padding: 16px 0px !important;
    }

    .right-modal .modal-thf-book-image {
        flex-shrink: 0 !important;
    }
    
    .right-modal .modal-thf-container {
        width: 100% !important;
        flex-shrink: 1 !important;
    }

    .right-modal .modal-thf-related-books-list{
        padding: 0 16px;
    }

    #wantInCollectionModal .thf-buy-book-content{
        padding: 0 16px;
    }

    #wantInCollectionModal .modal-thf-buy-book-redirect {
        width: 100%;
        justify-content: flex-start;
    }
    
    .thf-rec-retailer-buttons{
        flex-direction: column;
        align-items: center;
    }

    a.thf-rec-retailer-button {
        width: 100%;
    }
    
    .hidden-retailers {
        width: 100%;
    }
    .right-modal .modal-thf-books-list{
        height: calc(100vh - 177px);
        overflow: auto;
    }

    .right-modal .modal-thf-books-list{
        height: calc(100vh - 177px);
        overflow: auto;
    }
}

@media (min-width: 992) {
    #wantInCollectionModal .modal-thf-buy-book-redirect {
        width: 543px;
    }
}

/* Sidebar modal sliding from right in desktop view */
@media (min-width: 769px) {
    .recommendation-container {
        width: 69rem;
        margin: auto;
    }
    .right-modal.fade {
        width: 453px;
    }

    .right-modal.fade .modal-dialog {
        position: fixed;
        right: 0;
        margin: 0;
        height: 100%;
        transform: translateX(100%);
        transition: transform 0.4s ease-out, opacity 0.15s linear;
        width: 100%;
        overflow-x: hidden; /* Prevent content from going out of viewport */
    }

    .right-modal.fade.show .modal-dialog {
        transform: translateX(0);
    }

    .right-modal .modal-content {
        height: 100%;
        border-radius: 0;
        overflow-x: hidden; /* Prevent content from going out of viewport */
    }

    .right-modal .modal-body {
        padding: 0;
        height: calc(100% - 96px); /* Adjust for header height */
        overflow-y: auto; /* Enable scrolling if content overflows */
        overflow-x: hidden; /* Prevent horizontal overflow */
    }

    .right-modal .modal-header {
        border-bottom: 0;
        align-self: stretch;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        padding: 56px 16px 16px;
        gap: 0px;
    }

    .thf-rec-retailer-buttons {
        flex-direction: row;
        align-items: flex-end;
    }

    #wantInCollectionModal .modal-thf-buy-book-redirect {
        width: 543px;
    }
}

.right-modal .modal-header .close {
    background: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.8237 7.82512C22.2793 7.36951 22.2793 6.63082 21.8237 6.1752C21.368 5.71959 20.6294 5.71959 20.1737 6.1752L13.9987 12.3502L7.82366 6.1752C7.36804 5.71959 6.62935 5.71959 6.17374 6.1752C5.71813 6.63082 5.71813 7.36951 6.17374 7.82512L12.3488 14.0002L6.17374 20.1752C5.71813 20.6308 5.71813 21.3695 6.17374 21.8251C6.62935 22.2807 7.36804 22.2807 7.82366 21.8251L13.9987 15.6501L20.1737 21.8251C20.6294 22.2807 21.368 22.2807 21.8237 21.8251C22.2793 21.3695 22.2793 20.6308 21.8237 20.1752L15.6486 14.0002L21.8237 7.82512Z' fill='%232D3648'/%3E%3C/svg%3E") no-repeat center;
    background-size: 24px 24px;
    width: 24px;
    height: 24px;
    border: none;
    cursor: pointer;
    padding: 0;
    opacity: 1;
    margin: 0;
}

.right-modal .modal-header .back-button {
    background: url("data:image/svg+xml,%3Csvg width='20' height='12' viewBox='0 0 20 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2410_41764)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.50047 5.97812L1.48367 5.96138L1.50334 5.94189C1.50196 5.95384 1.50099 5.96593 1.50047 5.97812ZM2.02418 6.5L6.64575 11.1054C6.97655 11.435 6.7431 12 6.2761 12C6.13752 12 6.0046 11.9451 5.90644 11.8473L-2.43526e-06 5.96138L5.86363 0.151259C5.96142 0.0543625 6.09351 1.17203e-06 6.23118 1.16e-06C6.69756 1.11922e-06 6.93002 0.564868 6.59872 0.89313L1.94645 5.50284C1.96404 5.50096 1.98191 5.5 2 5.5L19 5.5C19.2761 5.5 19.5 5.72386 19.5 6C19.5 6.27614 19.2761 6.5 19 6.5L2.02418 6.5Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2410_41764'%3E%3Crect width='20' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center;
    background-size: 20px 24px;
    width: 24px;
    height: 24px;
    border: none;
    cursor: pointer;
    padding: 0px;
    visibility: hidden;
}

.right-modal .havein-modal-content,
.right-modal .wantin-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
}

.right-modal .modal-title {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: start;
    padding: 0px 16px;
    box-sizing: border-box;
    gap: 10px;
    text-align: left;
    font-size: 19px;
    color: #000;
    font-family: "ITCAvantGardeGothic", Arial, Sans-Serif;
    margin-bottom: 16px;
}

.right-modal .modal-thf-logo {
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.9 8.01001C25.89 13.48 21.46 17.91 16 17.91C10.53 17.91 6.1 13.48 6.1 8.01001H0C0.01 16.84 7.17 24 16 24C24.83 24 31.99 16.84 32 8.01001H25.9Z' fill='black'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    overflow: hidden;
    flex-shrink: 0;
}

.right-modal .modal-thf-text {
    position: relative;
    letter-spacing: 2px;
    line-height: 29px;
    font-weight: 600;
    font-size: 19px;
}

.right-modal .modal-thf-books-list {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 16px;
    box-sizing: border-box;
    gap: 0px;
    text-align: left;
    font-size: 13px;
    color: #000;
}

#wantInSidebarContent .modal-thf-books-list,
#haveInSidebarContent .modal-thf-books-list {
    overflow-y: auto;
}

.right-modal .modal-thf-related-books-list {
    padding: 0 16px;
    overflow-y: auto;
    width: 100%;
}

.right-modal .modal-thf-book-frame {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: flex-start;
    gap: 16px;
    padding: 16px 0;
}

.right-modal #haveInSidebarContent .modal-thf-related-books-list .modal-thf-book-frame {
    padding: 16px 0;
}

.right-modal #haveInSidebarContent .modal-thf-book-frame {
    padding: 24px 0;
}

.right-modal .modal-thf-book-image {
    width: 71px;
    position: relative;
    height: 98px;
    object-fit: cover;
}

.right-modal .modal-thf-container {
    width: 345px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}

.right-modal .modal-thf-book-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.right-modal .modal-thf-book-details-container .modal-thf-book-title {
    position: relative;
    font-size: 13px;
    letter-spacing: 0.3px;
    line-height: 18px;
    font-weight: 500;
    font-family: "ITCAvantGardeGothic", Arial, Sans-Serif;
    color: #000;
    text-align: center;
    display: inline-block;
    height: auto;
    margin: 0 !important;
}

.right-modal .modal-thf-book-details-container .modal-thf-book-author {
    align-self: center;
    position: relative;
    font-size: 12px;
    line-height: 21px;
    font-family: 'Source Serif Pro', serif;
    padding-bottom: 16px;
    font-weight: 400;
    margin: 0 !important;
}

.right-modal .modal-thf-book-details .modal-thf-book-title {
    position: relative;
    font-size: 13px;
    letter-spacing: 0.3px;
    line-height: 18px;
    font-weight: 500;
    font-family: "ITCAvantGardeGothic", Arial, Sans-Serif;
    color: #000;
    text-align: left;
    display: inline-block;
    height: auto;
    margin: 0 !important;
}

.right-modal .modal-thf-book-details .modal-thf-book-author {
    align-self: start;
    position: relative;
    font-size: 12px;
    line-height: 21px;
    font-family: 'Source Serif Pro', serif;
    padding-bottom: 16px;
    font-weight: 400;
    margin: 0 !important;
}

.right-modal .modal-thf-book-author a {
    text-decoration: underline;
    border-bottom: 0;
    cursor: pointer;
}

.right-modal .modal-thf-book-cta {
    border-radius: 24px;
    border: 1px solid #000;
    box-sizing: border-box;
    height: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
}

.right-modal .modal-thf-more-like-this,
.right-modal .modal-thf-get-the-book {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    font-weight: 600;
    color: #000;
    padding: 5px 16px;
}
.right-modal .modal-thf-more-like-this:hover,
.right-modal .modal-thf-get-the-book:hover {
    text-decoration: none;
}

.right-modal .modal-thf-more-like-this-text,
.right-modal .modal-thf-get-the-book-text {
    position: relative;
    letter-spacing: 1.7px;
    line-height: 16px;
    text-transform: uppercase;
}

.right-modal .modal-thf-more-like-this-icon,
.right-modal .modal-thf-get-the-book-icon {
    width: 10.5px;
    position: relative;
    height: 9px;
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.35067 5.02896L1.26032 1.81196C0.787148 1.31941 1.13623 0.5 1.81924 0.5C2.0302 0.5 2.23204 0.585989 2.37818 0.738123L6.5 5.02896L2.40851 9.26411C2.26287 9.41486 2.06224 9.5 1.85262 9.5C1.17043 9.5 0.822744 8.68067 1.29674 8.19004L4.35067 5.02896Z' fill='black'/%3E%3Cpath d='M8.31614 5.02894L5.27308 1.83585C4.79352 1.33264 5.15021 0.5 5.84533 0.5C6.06158 0.5 6.26839 0.588594 6.41758 0.745142L10.5 5.02894L6.44766 9.25708C6.29897 9.41222 6.09339 9.49994 5.8785 9.49994C5.18419 9.49994 4.82893 8.66735 5.30936 8.16609L8.31614 5.02894Z' fill='black'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.right-modal .learn-more-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    position: relative;
    padding: 5px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.7px;
    line-height: 16px;
    text-transform: uppercase;
    font-family: 'ITCAvantGardeGothic', Arial, Sans-Serif;
    color: #000;
    text-align: center;
    cursor: pointer;
}

.right-modal .learn-more-btn:hover {
    text-decoration: none;
}

.right-modal .modal-thf-book-excerpt {
    width: 100%;
    position: relative;
    font-size: 12px;
    line-height: 21px;
    font-family: 'Source Serif Pro';
    color: #000;
    text-align: left;
    font-weight: 400;
    display: inline-block;
}

.right-modal .modal-thf-book-retailers-list {
    width: 100%;
    position: relative;
    background-color: #fff;
    height: 768px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0px 32px;
    box-sizing: border-box;
    text-align: center;
    font-size: 13px;
    color: #000;
    font-family: 'ITCAvantGardeGothic', Arial, Sans-Serif;
}

#wantInCollectionModal .modal-thf-book-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 16px;
    width: 262px;
}

#wantInCollectionModal .modal-thf-holder {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

#wantInCollectionModal .modal-thf-book-details-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

#wantInCollectionModal .thf-book-retailers-container {
    color: #000;
    width: 355px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 24px 0px 0px;
    box-sizing: border-box;
    text-align: left;
    font-size: 10px;
    font-family: 'Source Serif Pro';
}

#wantInCollectionModal .thf-book-retailer-item {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 16px;
    box-sizing: border-box;
    gap: 16px;
    text-align: left;
    font-size: 10px;
    color: #000;
    font-family: 'Source Serif Pro';
}

#wantInCollectionModal .thf-book-retailer-details {
    align-self: stretch;
    position: relative;
    text-align: left;
    font-size: 10px;
    color: #000;
    font-family: 'Source Serif Pro';
    width: 196px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px; 
}

#wantInCollectionModal .thf-book-retailer-title {
    position: relative;
    font-size: 10px;
    line-height: 21px;
    font-family: 'Source Serif Pro';
    color: #000;
    text-align: left;
    font-weight: 400;
}

#wantInCollectionModal .thf-book-retailer-name {
    width: 100%;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
    object-fit: cover;
}

#wantInCollectionModal .thf-book-buy-now {
    flex: 1;
    cursor: pointer;
}

#wantInCollectionModal .thf-book-buy-now a {
    position: relative;
    border-radius: 24px;
    background-color: #000;
    border: 1px solid #000;
    box-sizing: border-box;
    height: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 5px 24px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    font-family: 'ITCAvantGardeGothic', Arial, sans-serif;
    color: #fff;
    position: relative;
    letter-spacing: 1.7px;
    line-height: 16px;
    text-transform: uppercase;
    text-decoration: none;

}

.amazon-logo {
    background: url('./images/amazon.png');
    background-size: auto;
    width: 100px;
    height: 30px;
    background-repeat: no-repeat;
}

.waterstones-logo {
    background: url('./images/waterstone.png');
    background-size: auto;
    width: 100px;
    height: 30px;
    background-repeat: no-repeat;
}

.hive-logo {
    background: url('./images/hive.png');
    background-size: auto;
    width: 100px;
    height: 30px;
    background-repeat: no-repeat;
}

.bookshop-logo {
    background: url('./images/bookshop.png');
    background-size: auto;
    width: 100px;
    height: 30px;
    background-repeat: no-repeat;
}

.otto-logo {
    background: url('./images/ottolenghi.svg');
    background-size: cover;
    width: 100px;
    height: 30px;
    background-repeat: no-repeat;
}

.rick-logo {
    background: url('./images/rickstein.svg');
    background-size: auto;
    width: 100px;
    height: 30px;
    background-repeat: no-repeat;
}

#wantInCollectionModal .modal-thf-buy-book-redirect {
    position: relative;
    text-align: center;
    font-size: 18px;
    color: #000;
    font-family: 'Source Serif Pro';
    background-color: #fff;
    height: 567px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px 0px 32px;
    box-sizing: border-box;
    overflow-x: hidden;
}

#wantInCollectionModal .thf-buy-book-content {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    overflow-y: auto;
}

#wantInCollectionModal .taking-you-text-wrapper {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: anchor-center;
    justify-content: center;
    padding: 24px 0px 0px;
    gap: 4px;
}

#wantInCollectionModal .taking-you-text {
    margin: 0;
    position: relative;
    letter-spacing: 0.3px;
    line-height: 29px;
    flex-shrink: 0;
}

#wantInCollectionModal .book-cover-image {
    width: 117.3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

#wantInCollectionModal .book-name-text {
    position: relative;
    letter-spacing: 0.3px;
    line-height: 26px;
    font-weight: 500;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: 'ITCAvantGardeGothic', Arial, sans-serif;
    margin: 0;
    width: 290px;
}

#wantInCollectionModal .thf-logo {
    width: 64px;
    position: relative;
    height: 64px;
    overflow: hidden;
    flex-shrink: 0;
}

#wantInCollectionModal .enjoy-text{
    margin: 0;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
}

.thf-taking-you-wrapper {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.thf-rec-retailer-buttons {
    width: 100%;
    position: relative;
    border-radius: 31px;
    display: flex;
    justify-content: center;
    padding: 16px 48px;
    box-sizing: border-box;
    gap: 8px;
    text-align: center;
    font-size: 14px;
    color: #000;
    font-family: 'ITCAvantGardeGothic', Arial,  sans-serif;
}

a.thf-rec-retailer-button {
    position: relative;
    font-size: 14px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-family: 'ITCAvantGardeGothic', Arial,  sans-serif;
    color: #fff;
    text-align: center;
    border-radius: 45px;
    background-color: #FABC2F;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.thf-rec-retailer-buy-link {
    padding: 16px;
    background-color: #FABC2F;
    color: #000000;
    border-radius: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 200px;
    font-weight: 600;
}

.thf-rec-retailer-buy-link::after {
    content: "";
    background-image: url(../../img/icons/recipe/open_in_new.png);
    width: 20px;
    height: 20px;
    background-size: contain;
    display: inline-block;
    filter: invert();
}

.see-all-retailers-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    background-color: transparent;
    color: black;
    font-size: 14px;
    font-weight: 600;
    padding-top: 16px;
}

.see-all-retailers-toggle::after {
    content: "";
    background-image: url(../../img/icons/recipe/chevron_down.png);
    width: 25px;
    height: 20px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.6s ease;
}

.see-all-retailers-toggle:focus, .see-all-retailers-toggle:active, .see-all-retailers-toggle:hover {
    box-shadow: none !important;
}

.see-all-retailers-toggle.rotate::after {
    transform: rotate(180deg); 
}

.recommendation-container h4 {
    width: 100%;
    position: relative;
    font-size: 14px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-family: 'ITCAvantGardeGothic', Arial, sans-serif;
    color: #000;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 13px;
    font-weight: 600;
}

.sidebar-newsletter-cta,
.sidebar-newsletter-success {
    width: 100%;
    position: fixed;
    background-color: #fabc2f;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 8px;
    gap: 8px;
    text-align: left;
    font-size: 12px;
    color: #333;
    font-family: 'Source Serif Pro';
    bottom: 0;
    left: 0;
}

.newsletter-cta-header,
.newsletter-success-header {
    align-self: stretch;
    border-radius: 31px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0px;
    text-align: center;
    font-size: 16px;
    color: #000;
    padding-top: 16px;
    padding-bottom: 24px;
    cursor: pointer;
    font-family: "ITCAvantGardeGothic", Arial, Sans-Serif;
}

.newsletter-cta-content,
.newsletter-success-content {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    font-size: 12px;
    color: #333;
    font-family: 'Source Serif Pro';
}

.newsletter-cta-header-title::after,
.newsletter-success-header-title::after {
    content: "";
    background-image: url(../../img/icons/recipe/chevron_down.png);
    width: 24px;
    height: 24px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.6s ease;
    position: absolute;
    right: 8px;
}

.newsletter-cta-description,
.newsletter-success-description {
    align-self: stretch;
    position: relative;
    line-height: 21px;
}

.newsletter-cta-checkboxes {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 4px 0px;
    gap: 8px;
}

.opt-in-newsletter {
    align-self: stretch;
    flex: 1;
    position: relative;
    line-height: 21px;
    letter-spacing: normal;
    font-weight: normal;
    text-align: left;
    font-size: 12px;
    color: #333;
    font-family: 'Source Serif Pro';
}

.newsletter-cta-email-form {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 14px;
    color: #5c5c5c;
}

.newsletter-field-and-button {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.newsletter-email-wrapper {
    flex: 1;
    background-color: #fff;
    border: 1px solid #e3e2db;
    box-sizing: border-box;
    height: 47px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding:8px;
}

.newsletter-email-wrapper:focus-within {
    outline-color: black;
    outline-style: inset;
    outline-width: 1px;
    margin-left: 1px;
}

#newsletter-user-email-have, #newsletter-user-email-want {
    border: none;
    width: 100%;
    padding: 1px;
}

#newsletter-user-email-have:focus, #newsletter-user-email-want:focus {
    outline: none;
}

#newsletter-user-email-have:focus-visible, #newsletter-user-email-want:focus-visible {
    outline: none;
}


.newsletter-user-email {
    position: relative;
    line-height: 25px;
}

.newsletter-send-list-wrapper{
    border-radius: 31px;
    background-color: #000;
    height: 45px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    font-family: 'ITCAvantGardeGothic', Arial, sans-serif;
}

.newsletter-send-list {
    position: relative;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.newsletter-footer-text,
.newsletter-success-footer-text{
    align-self: stretch;
    position: relative;
    font-size: 10px;
    line-height: 14px;
}

.newsletter-error-message {
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: #dc3545;
    font-weight: 600;
}