/* =========================================================

   WILLOW & HUE

   OUR BOOKS / COLLECTION PAGE

   \========================================================= */





/* =========================================================

   INTRO

   \========================================================= */



.collection-hero {

    padding: 75px 0 70px;

    background: var(--cream);

}



.collection-hero-inner {

    position: relative;



    display: flex;

    align-items: center;

    justify-content: center;



    min-height: 210px;



    text-align: center;

}



.collection-hero-copy {

    position: relative;

    z-index: 2;



    width: 100%;

    max-width: 720px;

}



.collection-hero .eyebrow {

    margin-bottom: 14px;

}



.collection-hero h1 {

    margin: 0;



    color: var(--brown);



    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(3rem, 5vw, 5rem);

    line-height: 0.98;

    letter-spacing: -0.04em;

}



.collection-hero-copy > p:last-child {

    max-width: 570px;



    margin: 20px auto 0;



    color: var(--text);



    font-size: 1.08rem;

    line-height: 1.65;

}



.collection-leaf {

    position: absolute;



    color: var(--sage);



    font-size: 4.5rem;



    opacity: 0.8;



    user-select: none;

}



.collection-leaf-left {

    left: 4%;

    transform: rotate(-20deg);

}



.collection-leaf-right {

    right: 4%;

    transform: scaleX(-1) rotate(-20deg);

}





/* =========================================================

   INDIVIDUAL COLLECTION SECTIONS

   \========================================================= */



.collection-book {

    position: relative;



    padding: 85px 0;



    overflow: hidden;

}



.collection-book-farm {

    background: var(--paper);

}



.collection-book-ocean {

    background: #edf2ea;

}



.collection-book-jungle {

    background: var(--cream);

}



.collection-book-halloween {

    background: #fae7d5;

}



.collection-book-cosmic {

    background: #F0E9F5;

}



.collection-book-dino {

    background: #f5f0e9;

}



.collection-book-fairy {

    background: #ddedde;

}



.collection-book-pirate {

    background: #e9ebf5;

}



.collection-book-cloud {

    background: #f5ebe9;

}



.collection-book-grid {

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    align-items: center;

    gap: 100px;

}



.collection-book-reverse .collection-book-visual {

    order: 2;

}



.collection-book-reverse .collection-book-copy {

    order: 1;

}





/* =========================================================

   COVER

   \========================================================= */



.collection-book-visual {

    position: relative;



    display: flex;

    align-items: center;

    justify-content: center;



    min-height: 470px;

}



.collection-book-ocean .collection-cover-backdrop {

    background: rgba(114, 167, 176, 0.13);

    transform: rotate(5deg);

}



.collection-book-jungle .collection-cover-backdrop {

    background: rgba(120, 148, 125, 0.14);

}



.collection-book-halloween .collection-cover-backdrop {

    background: rgba(229, 162, 111, 0.18);

    transform: rotate(4deg);

}



.collection-book-cover {

    position: relative;

    z-index: 2;



    display: block;



    width: min(100%, 385px);

    height: auto;



    border-radius: 4px;



    transform: rotate(-3deg);



    box-shadow:

        0 26px 45px rgba(82, 59, 43, 0.18),

        0 6px 12px rgba(82, 59, 43, 0.08);



    transition:

        transform 0.3s ease,

        box-shadow 0.3s ease;

}



.collection-book-reverse .collection-book-cover {

    transform: rotate(3deg);

}



.collection-book-cover:hover {

    transform: rotate(-1deg) translateY(-5px);



    box-shadow:

        0 32px 55px rgba(82, 59, 43, 0.2),

        0 8px 15px rgba(82, 59, 43, 0.08);

}



.collection-book-reverse .collection-book-cover:hover {

    transform: rotate(1deg) translateY(-5px);

}





/* =========================================================

   BOOK COPY

   \========================================================= */



.collection-book-copy {

    max-width: 570px;

}



.collection-book-copy .eyebrow {

    margin-bottom: 12px;

}



.collection-book-copy h2 {

    margin: 0;



    color: var(--brown);



    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(2.7rem, 4.5vw, 4.4rem);

    line-height: 1;

    letter-spacing: -0.035em;

}



.collection-book-description {

    max-width: 540px;



    margin: 22px 0 0;



    color: var(--text);



    font-size: 1.04rem;

    line-height: 1.7;

}





/* =========================================================

   SMALL FEATURES

   \========================================================= */



.collection-features {

    display: flex;

    align-items: flex-start;

    gap: 32px;



    margin-top: 30px;

}



.collection-feature {

    display: flex;

    align-items: center;

    gap: 10px;

}



.collection-feature > span {

    flex-shrink: 0;



    font-size: 1.6rem;

}



.collection-feature p {

    margin: 0;



    color: var(--text);



    font-size: 0.82rem;

    line-height: 1.25;

}





/* =========================================================

   BUTTON

   \========================================================= */



.collection-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;



    min-height: 52px;



    margin-top: 32px;

    padding: 13px 26px;



    border-radius: 999px;



    background: var(--peach);

    color: white;



    text-decoration: none;



    font-size: 0.94rem;

    font-weight: 700;



    box-shadow: 0 10px 20px rgba(82, 59, 43, 0.1);



    transition:

background 0.2s ease,

        transform 0.2s ease,

        box-shadow 0.2s ease;

}



.collection-button:hover {

    background: var(--brown);



    transform: translateY(-2px);



    box-shadow: 0 14px 26px rgba(82, 59, 43, 0.15);

}





/* =========================================================

   BENEFITS

   \========================================================= */



.collection-benefits {

    padding: 55px 0;



    background: var(--sage-light);

}



.collection-benefits-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

}



.collection-benefit {

    display: flex;

    align-items: center;

    gap: 20px;



    padding: 10px 38px;



    border-right: 1px solid rgba(95, 68, 52, 0.18);

}



.collection-benefit:first-child {

    padding-left: 0;

}



.collection-benefit:last-child {

    padding-right: 0;

    border-right: 0;

}



.collection-benefit-icon {

    flex: 0 0 auto;



    display: grid;

    place-items: center;



    width: 58px;

    height: 58px;



    font-size: 2rem;

}



.collection-benefit h3 {

    margin: 0 0 5px;



    color: var(--brown);



    font-family: Georgia, "Times New Roman", serif;

    font-size: 1.15rem;

}



.collection-benefit p {

    margin: 0;



    color: var(--muted);



    font-size: 0.85rem;

    line-height: 1.5;

}





/* =========================================================

   FINAL CTA

   \========================================================= */



.collection-final {

    padding: 75px 0 85px;



    background: var(--cream);

}



.collection-final-inner {

    display: grid;

    grid-template-columns: 150px minmax(0, 700px) 150px;

    align-items: center;

    justify-content: center;

    gap: 35px;



    text-align: center;

}



.collection-final h2 {

    margin: 0;



    color: var(--brown);



    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(2.5rem, 4vw, 4rem);

    line-height: 1;

    letter-spacing: -0.035em;

}



.collection-final p {

    max-width: 620px;



    margin: 18px auto 0;



    color: var(--text);



    font-size: 1rem;

    line-height: 1.65;

}



.collection-final .collection-button {

    margin-top: 26px;

}



.collection-final-leaf {

    font-size: 4.5rem;

    opacity: 0.7;

}



.collection-final-leaf:last-child {

    transform: scaleX(-1);

}





/* =========================================================

   TABLET

   \========================================================= */



@media (max-width: 900px) {



    .collection-book {

        padding: 70px 0;

    }



    .collection-book-grid {

        gap: 55px;

    }



    .collection-book-visual {

        min-height: 390px;

    }



    .collection-book-cover {

        width: min(100%, 320px);

    }



    .collection-cover-backdrop {

        width: 340px;

        height: 280px;

    }



    .collection-features {

        gap: 18px;

    }



    .collection-feature {

        align-items: flex-start;

    }



    .collection-benefit {

        padding-inline: 22px;

    }



    .collection-final-inner {

        grid-template-columns: 90px minmax(0, 600px) 90px;

    }



}



@media (max-width: 768px) {

  .collection-features {

    gap: 8px;

  }



  .collection-feature > span {

    width: 36px;

    height: 36px;

    margin-bottom: 10px;

  }



  .collection-feature > span img {

    width: 30px;

    height: 30px;

  }

}





/* =========================================================

   MOBILE

   \========================================================= */



@media (max-width: 650px) {



    .collection-hero {

        padding: 55px 0;

    }



    .collection-hero-inner {

        min-height: auto;

    }



    .collection-hero h1 {

        font-size: clamp(2.8rem, 13vw, 3.8rem);

    }



    .collection-hero-copy > p:last-child {

        font-size: 1rem;

    }



    .collection-leaf {

        display: none;

    }





    /* BOOK SECTIONS */



    .collection-book {

        padding: 65px 0 70px;

    }



    .collection-book-grid {

        grid-template-columns: 1fr;

        gap: 38px;

    }



    .collection-book-reverse .collection-book-visual,

    .collection-book-reverse .collection-book-copy {

        order: initial;

    }



    .collection-book-visual {

        min-height: auto;

    }



    .collection-book-cover {

        width: min(82%, 310px);

    }



    .collection-cover-backdrop {

        width: 85%;

        max-width: 330px;

        height: 250px;

    }



    .collection-book-copy {

        max-width: none;

    }



    .collection-book-copy h2 {

        font-size: clamp(2.6rem, 12vw, 3.5rem);

    }



    .collection-book-description {

        font-size: 1rem;

    }





    /* FEATURES */



    .collection-features {

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 12px;



        margin-top: 28px;

    }



    .collection-feature {

        display: block;



        text-align: center;

    }



    .collection-feature > span {

        display: block;



        margin-bottom: 7px;

    }



    .collection-feature p {

        font-size: 0.76rem;

    }





    /* BUTTON */



    .collection-button {

        width: 100%;



        margin-top: 28px;

    }





    /* BENEFITS */



    .collection-benefits {

        padding: 60px 0;

    }



    .collection-benefits-grid {

        grid-template-columns: 1fr;

        gap: 0;

    }



    .collection-benefit,

    .collection-benefit:first-child,

    .collection-benefit:last-child {

        padding: 25px 0;



        border-right: 0;

        border-bottom: 1px solid rgba(95, 68, 52, 0.15);

    }



    .collection-benefit:last-child {

        border-bottom: 0;

    }





    /* FINAL CTA */



    .collection-final {

        padding: 65px 0 75px;

    }



    .collection-final-inner {

        display: block;

    }



    .collection-final-leaf {

        display: none;

    }



    .collection-final h2 {

        font-size: 2.8rem;

    }



}



/* =========================================

   BOOK COLLECTION FEATURE ICON ALIGNMENT

   \========================================= */



.collection-features {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 16px;

  width: 100%;

}



.collection-feature {

  min-width: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  text-align: center;

}



.collection-feature > span {

  width: 40px;

  height: 40px;

  margin: 0 auto 12px;



  display: flex;

  align-items: center;

  justify-content: center;

}



.collection-feature > span img {

  display: block;

  width: 32px;

  height: 32px;

  max-width: 100%;

  object-fit: contain;

  margin: 0;

}



.collection-feature p {

  width: 100%;

  margin: 0;

  text-align: center;

  line-height: 1.4;

}

/* =========================================================
   SEARCHABLE BOOK CATALOGUE (ADDITIONAL STYLES)
   ========================================================= */
.collection-catalogue { padding: 78px 0 95px; background: var(--paper, #fffaf3); }
.collection-catalogue-heading { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.collection-catalogue-heading h2 { margin: 8px 0 12px; color: var(--brown); font: 700 clamp(2.3rem,4vw,3.6rem)/1.08 Georgia,"Times New Roman",serif; letter-spacing: -.035em; }
.collection-catalogue-heading > p:last-child { color: var(--text); line-height: 1.6; }
.collection-catalogue-controls { display: grid; grid-template-columns: minmax(0,2fr) repeat(3,minmax(0,1fr)); gap: 14px; padding: 22px; border: 1px solid rgba(95,68,52,.12); border-radius: 20px; background: #fffdf9; }
.collection-filter { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.collection-filter label { font-size: .82rem; font-weight: 700; color: var(--brown); }
.collection-filter input,.collection-filter select { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid #d8cec3; border-radius: 10px; background: white; color: var(--brown); font: inherit; font-size: .95rem; }
.collection-filter input:focus-visible,.collection-filter select:focus-visible,.collection-clear:focus-visible,.collection-load-more:focus-visible,.collection-card a:focus-visible { outline: 3px solid var(--sage, #93a68a); outline-offset: 3px; }
.collection-catalogue-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 20px 0 26px; }
.collection-results-count { color: var(--text); font-size: .9rem; margin: 0; }
.collection-clear { border: 0; background: none; color: var(--brown); font: inherit; font-size: .9rem; text-decoration: underline; cursor: pointer; padding: 6px; }
.collection-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.collection-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(95,68,52,.10); border-radius: 18px; background: #fffdfa; box-shadow: 0 9px 24px rgba(82,59,43,.06); }
.collection-card-media { display: flex; justify-content: center; align-items: center; padding: 30px 22px; min-height: 310px; background: #f5f0e9; }
.collection-card[data-theme="farm"] .collection-card-media { background: #edf2e7; }
.collection-card[data-theme="ocean"] .collection-card-media { background: #e8f2f1; }
.collection-card[data-theme="jungle"] .collection-card-media { background: #edf1e6; }
.collection-card[data-theme="halloween"] .collection-card-media { background: #fae7d5; }
.collection-card[data-theme="cosmic"] .collection-card-media { background: #f0e9f5; }
.collection-card[data-theme="dino"] .collection-card-media { background: #f5f0e9; }
.collection-card[data-theme="fairy"] .collection-card-media { background: #ddedde; }
.collection-card[data-theme="pirate"] .collection-card-media { background: #e9ebf5; }
.collection-card[data-theme="cloud"] .collection-card-media { background: #f5ebe9; }
.collection-card[data-theme="safari"] .collection-card-media { background: #fae7d5; }
.collection-card-cover { display: block; width: min(100%,205px); height: auto; border-radius: 3px; transform: rotate(-3deg); box-shadow: 0 15px 26px rgba(82,59,43,.18); transition: transform .25s ease; }
.collection-card:hover .collection-card-cover { transform: rotate(-1deg) translateY(-4px); }
.collection-card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 24px; }
.collection-card-meta { margin: 0 0 10px; font-size: .78rem; font-weight: 700; color: #8d6d57; }
.collection-card h3 { margin: 0 0 10px; color: var(--brown); font: 700 clamp(1.35rem,2vw,1.7rem)/1.15 Georgia,"Times New Roman",serif; }
.collection-card-description { margin: 0 0 20px; color: var(--text); line-height: 1.6; font-size: .92rem; }
.collection-card-link { margin-top: auto; color: var(--brown); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.collection-catalogue-actions { text-align: center; margin-top: 35px; }
.collection-load-more { min-height: 50px; padding: 12px 30px; border: 0; border-radius: 999px; background: var(--peach); color: white; font: inherit; font-weight: 700; cursor: pointer; }
.collection-load-more:hover { background: var(--brown); }
.collection-empty { padding: 38px 15px; text-align: center; color: var(--text); }
.collection-card[hidden],.collection-empty[hidden],.collection-load-more[hidden] { display: none !important; }
@media (max-width: 1000px) { .collection-catalogue-controls { grid-template-columns: repeat(2,minmax(0,1fr)); } .collection-cards { gap: 18px; } .collection-card-media { min-height: 270px; } }
@media (max-width: 700px) { .collection-catalogue { padding: 60px 0 70px; } .collection-cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .collection-card-media { padding: 18px 14px; min-height: 190px; } .collection-card-cover { width: min(100%,155px); } .collection-card-body { padding: 15px; } .collection-card h3 { font-size: 1.15rem; } .collection-card-description { font-size: .82rem; } .collection-card-meta { font-size: .72rem; } }
@media (max-width: 480px) { .collection-catalogue-controls { grid-template-columns: 1fr; padding: 16px; } .collection-cards { gap: 10px; } .collection-card-media { min-height: 150px; padding: 14px 10px; } .collection-card-body { padding: 12px; } .collection-card-description { display: none; } .collection-card h3 { font-size: 1.05rem; } .collection-card-link { font-size: .85rem; } }
@media (prefers-reduced-motion: reduce) { .collection-card-cover { transition: none; } }


/* =========================================
   BOOK CATALOGUE FILTER ALIGNMENT
   ========================================= */

.collection-catalogue select,
.collection-catalogue input[type="search"] {
    width: 100%;
    height: 60px;
    min-height: 60px;
    padding: 0 16px;

    border: 1px solid #d9cbb9;
    border-radius: 12px;

    background-color: #fffdf8;
    color: var(--brown);

    font: inherit;
    font-size: 1rem;

    box-sizing: border-box;
}

.collection-catalogue select {
    padding-right: 36px;
    cursor: pointer;
}

.collection-catalogue select:focus,
.collection-catalogue input[type="search"]:focus {
    outline: 2px solid var(--peach);
    outline-offset: 2px;
}