@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');


body {
    font-family: "Cormorant Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0;
    background-color: #d1baa9;
    color: #3f1b1c;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Cormorant Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    letter-spacing: -0.05em;
    line-height: 1em;
}
p, ul, ol {
    font-family: "Cormorant Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    letter-spacing: -0.05em;
    font-size: 1.35rem;
}
.productsListing .productSummary p,
section.theProductDetails article.textCol .notice p,
.formArea ul li label,
table,
.paginationControls,
#buttonArea a {
    font-size: 1.2rem;
    font-weight: 400;
}

.maxPageWidth,
.siteMaxWidth {
    width: 96%;
    margin: 0 auto;
}

.templateContentArea p,
.templateContentArea h1,
.templateContentArea h2,
.templateContentArea h3,
.templateContentArea h4,
.templateContentArea h5,
.templateContentArea h6,
.collectionsListing article h2,
ul.theCollections li h4,
.filteringOptions ul li,
.productsListing .productSummary h2,
section.theProductDetails article.textCol h1,
.contentCentered h2,
.templateContentArea article.twoColLayout .textArea h2,
ul.designersList li .textArea h2,
ul.designersList li .textArea a.moreLink,
ul.intlDistrib li p,
.shoppingBasket2020 ul li .itemDetailsArea h3,
.shoppingBasket2020 ul li .itemDetailsArea p.code,
.shoppingBasket2020 ul li .itemDetailsArea a.basketItemRemoveLink,
.templateContentArea ul, .templateContentArea table,
section.designerDetails article.textArea h2,
section.collectionOutput h3,
.formArea ul li label,
.resultsArea .searchTerms,
table#totalsArea {
    color: #612526;
}
.collectionsListing article h2,
.productPageLayout .filtering h2,
section.theProductDetails article.textCol a.sampleButton,
ul.designersList li .textArea a.moreLink,
ul.designersList li,
.templateContentArea article.twoColLayout,
section.theProductDetails article.textCol .notice,
.shoppingBasket2020 ul li .itemDetailsArea a.basketItemRemoveLink,
ul.searchResults li,
.resultsArea .searchTerms {
    border-color: #612526;
}
.filteringOptions .theOptions {
    background-color: #d1baa9;
    color: #612526;
}
.thePageHeaderArea .theContentArea h1 {
    color: #FFF;
}

.productSearchBar {
    background-color: #612526;
    z-index: 10000;
    top: -76px;
}
.productSearchBar.isVisible {
    position: fixed;
}


header nav.pageNavigation {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
}
header nav.pageNavigation > ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    padding: 0 20px 0 0;
    color: #612526;
    background-color: #d1baa9;
}
header nav.pageNavigation ul li {
    position: relative;
    padding: 15px;
    cursor: pointer;
    font-size: 1.2rem;
}
header nav.pageNavigation ul li > ul {
    position: absolute;
    top: 40px;
    right: 0;
    width: 200px;
    text-align: right;
    list-style: none;
    margin: 0;
    padding: 0 10px 0 0;
    display: none;
    background-color: #d1baa9;
}
header nav.pageNavigation ul li:hover > ul {
    display: block;
    padding-top: 3px;
}
header nav.pageNavigation ul li > ul li {
    padding: 7px 10px;
}

header nav.pageNavigation ul li.mobileMenuLink {
    display: none;
}
.mobileMenuToggle {
    padding: 0;
    color: #612526;
    font-size: 1.5rem;
    display: block;
}
.mobileNavigation {
    position: fixed;
    top: 0;
    right: 0;
    left: unset;
    text-align: right;
    background-color: #d1baa9;
}
.mobileNavigation .mobileMenuToggle {
    padding: 15px 29px;
    font-size: 1.5rem;
}
.mobileNavigation .pageNavigation ul li {
    text-align: center;
    padding: 0 0 20px;
    font-size: 1.2rem;
    color: #612526;
}
.mobileNavigation .pageNavigation ul li > ul {
    margin-top: 20px;
}

.homeHero26 {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: stretch;
}
.homeHero26 .theImageArea {
    width: 50%;
    height: 100%;
}
.sy-box,
.sy-slide,
.sy-slide > a,
.sy-slide > a > img {
    height: 100%;
}
.sy-slide > a > img {
    object-position: center center;
    object-fit: cover;
}

.homeHero26 .theContentArea {
    height: calc(100% - 100px);
    width: calc(50% - 100px);
    position: relative;
    background-color: #d1baa9;
    padding: 50px;
}
.homeHero26 .theContentArea .heroLogo {
    position: absolute;
    top: 100px;
    left: 20px;
    width: 65%;
    font-size: 4rem;
    color: #3f1b1c;
    font-weight: 600;
    line-height: 1em;
    display: block;
}
.homeHero26 .theContentArea .logoArea {
    position: absolute;
    bottom: 25px;
    right: 50px;
    width: 50%;
    text-align: left;
}
.homeHero26 .theContentArea .logoArea img {
   display: block;
   margin: 0 auto 25px;
}

.homeHero26 .theContentArea .logoArea hr {
    display: block;
    margin: 0 auto 50px;
    border: none;
    border-bottom: 1px solid #493725;
}
.homeHero26 .theContentArea .logoArea p {
    text-align: left;
    font-size: clamp(2.2rem, 2.5vw, 5rem);
    color: #612526;
    font-weight: 400;
    line-height: 1.35em;
}


.thePageHeaderArea {
    min-height: unset;
    padding: 50px 0 0;
}
.thePageHeaderArea .theContentArea {
    background-color: unset;
    padding: 0;
}
.thePageHeaderArea .theContentArea h1,
.thePageHeaderArea .theContentArea p.subHeader {
    color: #612526;
}


.contentSnippet h2 {
    font-size: 3rem;
    margin: 0 auto 50px;
    color: inherit;
}
.contentSnippet h3 {
    font-size: 2rem;
    margin: 0 auto 20px;
    color: inherit;
}
.contentSnippet p {
    font-size: 1.5rem;
    line-height: 1.2em;
    font-weight: 400;
    color: inherit;
}

.collection {
    color: #493725;
}
.collection .maxPageWidth {
    position: relative;
    display:grid;
    grid-template-columns: 60% 1fr;
    gap: 50px;
    align-items: center;
    align-content: center;
    padding: 50px;
    width: calc(100% - 100px);
    background: url('/Images/template/Art-Of-The-Loom-Logo-2026.png') no-repeat bottom 30px left 40px;
    background-size: clamp(200px, 20%, 500px) auto;
}
.collection a.theSnippetLink {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
}

.collection.style3 .maxPageWidth {
    grid-template-columns: 30% 1fr;
}

.collection .theContentArea {
    padding: 50px;
}
.collection.style1 {
    color: #612526;
    background-color: #aa9079;
}
.collection.style1 p {
    color: #612526;
}
.collection.style2 {
    color: #612526;
    background-color: #bcb4a0;
}
.collection.style2 p {
    color: #612526;
}
.collection.style3 {
    color: #612526;
    background-color: #d1baa9;
}
.collection.style3 p {
    color: #612526;
}
.collection .theImageArea {
    height: 100%;
}
.collection .theImageArea img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
}

.hmCollectionsSummary {
    background-color: #aa9079;
    color: #612526;
}
.hmGallerySummary .maxPageWidth,
.hmCollectionsSummary .maxPageWidth {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 50px;
    align-items: center;
    align-content: center;
    padding: 50px;
    width: calc(100% - 100px);
    background: url('/Images/template/Art-Of-The-Loom-Logo-2026.png') no-repeat bottom 30px left 40px;
    background-size: clamp(200px, 20%, 500px) auto;
}
.hmGallerySummary .theTextArea,
.hmGallerySummary .theTextArea h2,
.hmGallerySummary .theTextArea h3,
.hmGallerySummary .theTextArea p,
.hmCollectionsSummary .theTextArea,
.hmCollectionsSummary .theTextArea h2,
.hmCollectionsSummary .theTextArea h3,
.hmCollectionsSummary .theTextArea p {
    text-align: left;
}
.hmGallerySummary .theTextArea hr,
.hmCollectionsSummary .theTextArea hr {
    border: none;
    border-bottom: 1px solid #612526;
    margin: 0 0 20px 0;
}
.hmCollectionsSummary .theTextArea ul {
    font-size: 1.5rem;
    color: inherit;
}
.hmCollectionsSummary .theTextArea ul li {
    margin: 0 0 5px 0;
}
.hmGallerySummary .gallery-images,
.hmCollectionsSummary .gallery-images {
    background-color: #3f1b1c;
    padding: 50px;
    margin: -50px -50px -50px 0;
}
.hmGallerySummary .gallery-images ul,
.hmCollectionsSummary .gallery-images ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hmGallerySummary .gallery-images ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 50px;
}
.hmGallerySummary .gallery-images ul img,
.hmCollectionsSummary .gallery-images ul img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Thjis neesd to be done in code not here! */

.hmCollectionsSummary .gallery-images ul li {
    display: none;
}
.hmCollectionsSummary .gallery-images ul li:first-child {
    display: block;
}

.hmGalleryArea {
    background-color: #aa9079;
    color: #612526;
}

.hmGallerySummary {
    background-color: #bcb4a0;
    color: #612526;
}
.hmGallerySummary .gallery-images {
    background-color: #3f1b1c;
}

.hmTeamSummary {
    background-color: #d1baa9;
    color: #612526;
}
.hmTeamSummary .maxPageWidth,
.hmProvenance .maxPageWidth,
.hmWhereToBuy .maxPageWidth,
.hmBespoke .maxPageWidth {
    padding: 50px 0;
}
.hmTeamSummary .team-groups {
    margin: 0 auto;
    text-align: center;
}
.hmTeamSummary .team-groups ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 50px;
    color: inherit;
}
.hmTeamSummary .team-groups ul li .theImage {
    margin: 0 auto 50px;
}
.hmTeamSummary .team-groups ul li h3 {
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hmTeamSummary .team-groups ul li p {
    font-size: 1.4rem;
}

.hmProvenance {
    background-color: #5d624d;
    color: #b6a292;
}
.theProvenanceArea {
    margin: 0 auto;
    width: 80%;
    display: grid;
    grid-template-columns: 60% 1fr;
    align-items: center;
    align-items: flex-start;
    gap: 50px;
}
.theProvenanceArea p.subHeader {
    font-size: 2rem;
    margin: -20px auto 40px;
}
.theProvenanceArea .theImage img {
    display: block;
    margin: 20px auto 30px;
}
.theProvenanceArea .theImage p {
    margin: 0 auto;
    width: 70%;
}

.hmBespoke {
    background-color: #bcb4a0;
    color: #612526;
}
.hmBespoke .maxPageWidth {
    background: url('/Images/template/Art-Of-The-Loom-Logo-2026.png') no-repeat bottom 30px right 40px;
    background-size: clamp(200px, 20%, 500px) auto;
}
.theBespokeService {
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: center;
    align-items: center;
    gap: 50px;
}
.theBespokeService .theImage img {
    display: block;
    margin: 20px auto 30px;
}
.theBespokeService .theImage p {
    margin: 0 auto;
    width: 70%;
}


.hmContactInfo {
    background-color: #3f1b1c;
}
.contactInformationArea {
    color: #d1baa9;
}
.contactInformationArea .maxPageWidth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    align-items: center;
}
.contactInformationArea .theTextArea {
    padding: 0 50px;
    text-align: left;
}
.contactInformationArea .theTextArea h2,
.contactInformationArea .theTextArea h4,
.contactInformationArea .theTextArea p {
    text-align: left;
}
.contactInformationArea .theTextArea h2 {
    margin: 0 0 100px;
    color: inherit;
}
.contactInformationArea .theTextArea h4 {
    margin: 0 0 20px;
    font-size: 1.8rem;
    font-weight: 400;
    color: inherit;
}
.contactInformationArea .theTextArea p {
    margin: 0 0 5px;
}
.contactInformationArea .theTextArea hr {
    border: none;
    border-bottom: 1px solid #d1baa9;
    margin: 20px 0;
}
.contactInformationArea .theImageArea img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.hmWhereToBuy {
    background-color: #b6a292;
    color: #612526;
}
.hmWhereToBuy .maxPageWidth {
    background: url('/Images/template/Art-Of-The-Loom-Logo-2026.png') no-repeat bottom 30px left 40px;
    background-size: 200px auto;
    padding-bottom: 100px;
}
.hmWhereToBuy table {
    width: 80%;
    margin: 0 auto 50px;
}
.hmWhereToBuy table td {
    text-align: center;
    font-size: 1.5rem;
    color: #612526;
    font-weight: 600;
}
.orderScreen,
.orderCheckout,
.resultsArea {
    padding: 75px 0 30px;
}


.formArea {
    margin: 150px auto 100px;
    border-color: #612526;
}
.formArea h3 {
    color: #d1baa9;
    background-color: #612526;
}

.twoColBackgroundFill {
    background-color: #aa9079;
    margin-bottom: 50px;
}


section.theProductDetails {
    padding-top: 75px;
}

.templateContentArea .gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-auto-rows: 180px;
    gap: 50px;
    list-style: none;
    margin: 0 auto 50px;
    padding: 0;
}
.gallery-grid li img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
}


ul.designersList li .textArea .theText p {
    line-height: 1.4em;
}



footer {
    background-color: #aa9079;
    color: #612526;
    margin: 0;
}
footer ul li,
footer section.footerLinksArea article p {
    color: #612526;
}


.templateContentArea:has(.formArea) {
    margin-top: -1px;
    padding-top: 1px;
}


@media screen and (max-width: 1590px) {
    header nav.pageNavigation ul li {
        display: none;
    }

    header nav.pageNavigation ul li.mobileMenuLink,
    header nav.pageNavigation ul li.searchLink,
    header nav.pageNavigation ul li.tradeLink,
    header nav.pageNavigation ul li.orderLink {
        display: block;
    }
}


@media screen and (max-width: 960px) {

    .homeHero26 {
        display: block;
        height: unset;
        padding-top: 55px;
        margin-top: -1px;
    }
    .homeHero26 .theImageArea {
        width: 100%;
        height: 50vh;
    }
    .homeHero26 .theContentArea {
        width: 100%;
        height: unset;
        padding: 20px 0 50px;
    }
    .homeHero26 .theContentArea .heroLogo {
        position: relative;
        left: unset;
        top: unset;
        margin: 30px auto;
        text-align: center;
    }
    .homeHero26 .theContentArea .logoArea {
        position: relative;
        bottom: unset;
        right: unset;
        margin: 0 auto;
        text-align: center;
    }

    .collection .maxPageWidth,
    .hmGallerySummary .maxPageWidth,
    .hmCollectionsSummary .maxPageWidth,
    .theProvenanceArea,
    .hmTeamSummary .team-groups ul,
    .contactInformationArea .maxPageWidth,
    .hmWhereToBuy .maxPageWidth {
        grid-template-columns: 1fr;
        background-position: bottom 20px center;
    }

    .collection .maxPageWidth,
    .hmGallerySummary .maxPageWidth,
    .hmCollectionsSummary .maxPageWidth,
    .hmBespoke .maxPageWidth {
        padding-bottom: 115px;
    }
    .collection .theContentArea {
        padding: 20px 0;
    }

    .hmWhereToBuy table tr {
        display: flex;
        flex-wrap: wrap;
    }
    .hmWhereToBuy table tr td {
        width: 100%;
        padding: 20px 0;
    }
}