/* What We Create section, cards, buttons, main page content */
/* ==========================================
   GLOBAL OVERFLOW SAFETY FIX
========================================== */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}


/* ==========================================
   WHAT WE CREATE
========================================== */

.what-we-create {
    background: #fffaf3;
}

.section-title {
    color: #173b57;
    font-weight: 800;
    font-size: 2.4rem;
}

.section-subtitle {
    color: #5c5c5c;
    font-size: 1rem;
    max-width: 720px;
    margin: 0 auto;
}

/* Card styling */
.what-we-create .create-card {
    border-radius: 1.5rem;
    border: 1px solid rgba(31, 78, 121, 0.08);
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
    transition: all 0.3s ease;
    overflow: hidden;
}

.what-we-create .create-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.10);
}

.what-we-create .card-body {
    padding: 2rem;
}

/* ==========================================
   ICON CIRCLE
========================================== */

.what-we-create .create-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    margin: 0 auto 1.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #eef8fc, #ffffff);
    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Icon styling */
.what-we-create .create-icon i {
    font-size: 4.25rem !important;
    line-height: 1 !important;
    display: block !important;
    background: linear-gradient(135deg, #bd3640, #d85a4c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent !important;
}

/* ==========================================
   CARD TITLE
========================================== */

.what-we-create .create-card h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #bd3640, #d85a4c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* ==========================================
   CARD TEXT
========================================== */

.what-we-create .create-card p {
    color: #5b667a;
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

/* ==========================================
   LINK
========================================== */

.what-we-create .create-link {
    display: inline-block;
    margin-top: auto;
    color: #0b8f82;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.3s ease;
}

.what-we-create .create-link:hover {
    color: #bd3640;
    text-decoration: underline;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 991px) {
    .what-we-create .create-card {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }

    .what-we-create .create-icon {
        width: 90px;
        height: 90px;
    }

    .what-we-create .create-icon i {
        font-size: 3.25rem !important;
    }

    .what-we-create .create-card h3 {
        font-size: 1.75rem;
    }

    .what-we-create .create-card p {
        font-size: 1rem;
        line-height: 1.7;
    }
}

/* BOOKS PAGE GRID */

.book-page {
    background: rgba(255, 255, 255, 0.92);
    transition: background 0.3s ease;
}

.book-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.book-card {
    background: #ffffff;
    border: 1px solid rgba(13, 110, 138, 0.12);
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.3s ease;
}

.book-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.1);
}

.book-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    background: #fff7ef;
}

.book-card-body {
    padding: 1.25rem;
}

.book-card h3 {
    color: #0d4f66;
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
}

.book-card p {
    color: #555;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 0.35rem;
}

.purchase-btn,
a.purchase-btn,
a.purchase-btn:link,
a.purchase-btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 0.9rem;
    padding: 0.75rem 1.5rem;

    background: linear-gradient(135deg,
            var(--lh-red),
            var(--lh-red-dark));

    color: #ffffff !important;

    border-radius: 999px;
    font-weight: 700;
    text-decoration: none !important;

    box-shadow: 0 8px 20px rgba(189, 54, 64, 0.22);
    transition: all 0.3s ease;
}

.purchase-btn:hover,
a.purchase-btn:hover {
    background: linear-gradient(135deg,
            var(--lh-red-dark),
            #8f252e);

    color: #ffffff !important;
    text-decoration: none !important;

    transform: translateY(-2px);

    box-shadow: 0 12px 24px rgba(189, 54, 64, 0.30);
}

/* Responsive */
@media (max-width: 1199px) {
    .book-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .book-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .book-card img {
        height: 210px;
    }
}

@media (max-width: 576px) {
    .book-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   BOOK CARDS
========================================== */

.book-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.book-card img {
    width: 100%;
    height: 320px;
    object-fit: contain;
    display: block;
    background: #fff;
    padding: 0.5rem;
}

.book-card .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Keeps all text sections the same height */
.book-card .book-info {
    min-height: 260px;
}

.book-card .card-body h3,
.book-card .card-body h4,
.book-card .card-body p {
    margin-bottom: 1rem;
}

/* Keeps all buttons aligned */
.book-card .purchase-btn {
    margin-top: auto;
    align-self: center;
}

/* ==========================================
   BOOK CATEGORY BANNERS
========================================== */
.books-hero-banner {
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
}

.books-hero-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================
   BOOKS INTRO SECTION
========================================== */
.books-intro {
    position: relative;
    padding: 3rem 0;

    /* Much more transparent */
    background: rgba(255, 255, 255, 0.35);

    /* Light blur for readability */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    border-top: 1px solid rgba(255, 255, 255, 0.45);
    border-bottom: 1px solid rgba(11, 79, 108, 0.08);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 8px 20px rgba(11, 79, 108, 0.04);
}

/* Badge */
.books-badge {
    display: inline-block;
    background: rgba(255, 92, 122, 0.12);
    color: #ff5c7a;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
}

/* Title */
.books-intro .section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #0f4c75;
    margin-bottom: 0.75rem;
}

/* Subtitle */
.books-intro .section-subtitle {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.7;
    color: #5b6470;
}

/* Paw divider */
.books-divider {
    margin-top: 1rem;
    font-size: 1.2rem;
    color: #ff8c42;
}

/* ==========================================
   SCROLL FADE EFFECT
========================================== */
.books-intro {
    position: relative;
    z-index: 1;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.books-intro.scrolled {
    opacity: 0;
    transform: translateY(-20px);
}

/* ==========================================
   PAGE LOAD ANIMATION
========================================== */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   PARENTING INTRO SECTION
========================================== */
.parenting-intro {
    position: relative;
    padding: 3rem 0;

    /* Much more transparent */
    background: rgba(255, 255, 255, 0.35);

    /* Light blur for readability */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    border-top: 1px solid rgba(255, 255, 255, 0.45);
    border-bottom: 1px solid rgba(11, 79, 108, 0.08);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 8px 20px rgba(11, 79, 108, 0.04);
}

.parenting-intro .books-badge {
    background: rgba(255, 140, 66, 0.12);
    color: #ff8c42;
}

.parenting-intro .section-title {
    color: #0f4c75;
}

.parenting-intro .section-subtitle {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #5b6470;
}

.parenting-intro .books-divider {
    margin-top: 1rem;
    font-size: 1.4rem;
    color: #ff5c7a;
}

.parenting-page {
    background-image: url("../images/backgrounds/background-page.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* ==========================================
   PARENTING BOOKS BANNER
========================================== */
.parenting-banner {
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;

}

.parenting-banner img {
    width: 100%;
    height: 220px;
    /* Adjust as needed */
    object-fit: cover;
    object-position: center center;
    display: block;
}


/* ==========================================
   AMARU INTRO SECTION
========================================== */
.amaru-intro {
    position: relative;
    padding: 3rem 0;

    /* Much more transparent */
    background: rgba(255, 255, 255, 0.35);

    /* Light blur for readability */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    border-top: 1px solid rgba(255, 255, 255, 0.45);
    border-bottom: 1px solid rgba(11, 79, 108, 0.08);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 8px 20px rgba(11, 79, 108, 0.04);
}

.amaru-intro .books-badge {
    background: rgba(255, 166, 0, 0.12);
    color: #e67e22;
}

.amaru-intro .section-title {
    color: #0f4c75;
}

.amaru-intro .section-subtitle {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #5b6470;
}

.amaru-intro .books-divider {
    margin-top: 1rem;
    font-size: 1.4rem;
    color: #f39c12;
}

/* ==========================================
   AMARU PAGE BACKGROUND
========================================== */
.amaru-page {
    background:
        linear-gradient(rgba(255, 255, 255, 0.50),
            rgba(255, 255, 255, 0.50)),
        url("../images/backgrounds/background-amaru.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* ==========================================
   HERO BANNER SCROLL EFFECT
========================================== */
.books-hero-banner {
    transition: opacity 0.1s linear;
    will-change: opacity, transform;
}

/* ==========================================
   PUG FU PAGE BACKGROUND
========================================== */

.pug-fu-page {
    background: #ffffff;
}

/* ==========================================
   COLORING PAGE BACKGROUND
========================================== */
.coloring-page {
    background:
        linear-gradient(rgba(255, 255, 255, 0.75),
            rgba(255, 255, 255, 0.75)),
        url("../images/backgrounds/background-coloring.png");

    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* ==========================================
   SIDE ARROWS
========================================== */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6b7a, #ff8e9a);
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(255, 107, 122, 0.30);
    transition: all 0.3s ease;
}

.carousel-btn:hover {
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 14px 30px rgba(255, 107, 122, 0.40);
}

.carousel-btn-prev {
    left: -26px;
}

.carousel-btn-next {
    right: -26px;
}


/* ==========================================
   SIDE ARROWS
========================================== */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #bd3640, #ff7a88);
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(189, 54, 64, 0.32);
    transition: all 0.3s ease;
}

.carousel-btn:hover {
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 16px 34px rgba(189, 54, 64, 0.42);
}

.carousel-btn-prev {
    left: -26px;
}

.carousel-btn-next {
    right: -26px;
}




/* ==========================================
   FEATURED TOOLKIT TOPICS
========================================== */

.featured-topics-section {
    padding: 5rem 0;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.featured-topics-section .container {
    max-width: 1180px;
}


/* ==========================================
   FEATURED TOPICS GRID
========================================== */

.featured-topics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem;
}


/* ==========================================
   FEATURED TOPIC CARD
========================================== */

.featured-topic-card {
    position: relative;

    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 1rem;

    min-height: 104px;
    padding: 1.15rem 1.2rem;

    color: #0d2c54;
    text-decoration: none;

    background: #ffffff;

    border: 1px solid rgba(13, 44, 84, 0.10);
    border-radius: 18px;

    box-shadow:
        0 12px 28px rgba(13, 44, 84, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}


/* ==========================================
   FEATURED TOPIC ICON
========================================== */

.featured-topic-icon {
    width: 48px;
    height: 48px;

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

    border-radius: 50%;

    color: #cf3747;
    background: rgba(207, 55, 71, 0.10);

    font-size: 1.05rem;

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


/* ==========================================
   FEATURED TOPIC CONTENT
========================================== */

.featured-topic-content {
    min-width: 0;
}

.featured-topic-content h3 {
    margin: 0 0 0.25rem;

    color: #0d2c54;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
}

.featured-topic-content p {
    margin: 0;

    color: #5f7084;
    font-size: 0.85rem;
    line-height: 1.35;
}


/* ==========================================
   FEATURED TOPIC ARROW
========================================== */

.featured-topic-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #93a4b6;
    font-size: 0.9rem;

    transition:
        transform 0.25s ease,
        color 0.25s ease;
}


/* ==========================================
   ACTIVE TOPIC CARD
========================================== */

.featured-topic-card-active:hover {
    transform: translateY(-5px);

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 1),
            rgba(255, 247, 248, 1));

    border-color: rgba(207, 55, 71, 0.24);

    box-shadow:
        0 18px 36px rgba(13, 44, 84, 0.12),
        0 8px 18px rgba(207, 55, 71, 0.10);
}

.featured-topic-card-active:hover .featured-topic-icon {
    color: #ffffff;
    background: linear-gradient(135deg, #cf3747, #f36b75);
    transform: scale(1.05);
}

.featured-topic-card-active:hover .featured-topic-arrow {
    color: #cf3747;
    transform: translateX(4px);
}


/* ==========================================
   DISABLED TOPIC CARD
========================================== */

.featured-topic-card-disabled {
    cursor: default;
    opacity: 0.68;
}

.featured-topic-card-disabled .featured-topic-arrow {
    opacity: 0.45;
}

.featured-topic-card-disabled:hover {
    transform: none;
}


/* ==========================================
   FEATURED TOPICS NOTE
========================================== */

.featured-topics-note {
    margin-top: 2rem;

    color: #64748b;
    font-size: 0.95rem;
}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 1100px) {

    .featured-topics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {

    .featured-topics-section {
        padding: 4rem 0;
    }

    .featured-topics-grid {
        grid-template-columns: 1fr;
    }

    .featured-topic-card {
        min-height: 96px;
    }
}

@media (max-width: 480px) {

    .featured-topic-card {
        grid-template-columns: 44px minmax(0, 1fr) 20px;
        gap: 0.85rem;

        padding: 1rem;
        border-radius: 16px;
    }

    .featured-topic-icon {
        width: 44px;
        height: 44px;
    }

    .featured-topic-content h3 {
        font-size: 0.95rem;
    }

    .featured-topic-content p {
        font-size: 0.8rem;
    }
}

/* ==========================================
   COMING SOON LABEL
========================================== */
.coming-soon-label {
    display: inline-block;
    padding: 0.55rem 1.25rem;
    border-radius: 999px;

    /* Stronger gradient for better visibility */
    background: linear-gradient(135deg, #bd3640, #ff8a94);

    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    box-shadow:
        0 10px 24px rgba(189, 54, 64, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ==========================================
   FADED COMING SOON GRID
========================================== */
.coming-soon-grid {
    opacity: 0.65;
    pointer-events: none;
}

/* ==========================================
   BOOK SELECTION PAGE
========================================== */
.book-selection-section {
    padding-top: 2rem;
    padding-bottom: 5rem;
}



.book-selection-card {
    height: 100%;
    max-width: 300px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(11, 79, 108, 0.10);
    box-shadow:
        0 16px 36px rgba(11, 79, 108, 0.12),
        0 6px 14px rgba(189, 54, 64, 0.08);
    transition: all 0.3s ease;
}

.book-selection-card:hover {
    transform: translateY(-7px);
    box-shadow:
        0 26px 56px rgba(11, 79, 108, 0.18),
        0 10px 24px rgba(189, 54, 64, 0.14);
}

.book-selection-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

/* ==========================================
   BOOK SELECTION CARD CONTENT
========================================== */
.book-selection-card-body {
    padding: 1.75rem 1.5rem 2rem;
    background: linear-gradient(135deg, #ffffff 0%, #fffaf2 100%);
    display: flex;
    flex-direction: column;
    min-height: 280px;
    text-align: center;
}

.book-selection-card-body h3 {
    color: #0b4f6c;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 0.9rem;
    letter-spacing: -0.02em;
}

.book-selection-card-body p {
    color: #5b6470;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1.75rem;
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
}

.book-selection-card-body .purchase-btn {
    margin-top: auto;
    align-self: center;
}

/* ==========================================
   BOOK SELECTION IMAGE HOVER SWAP
========================================== */
.book-selection-image-link {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.book-selection-image-link img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        opacity 0.45s ease,
        transform 0.45s ease;
}

.book-img-default {
    opacity: 1;
    z-index: 1;
}

.book-img-hover {
    opacity: 0;
    z-index: 2;
}

.book-selection-card:hover .book-img-default {
    opacity: 0;
    transform: scale(1.03);
}

.book-selection-card:hover .book-img-hover {
    opacity: 1;
    transform: scale(1.03);
}



/* ==========================================
   BOOK SELECTION INTRO
   More vibrant, warm, and visually rich
========================================== */
.book-selection-intro {
    position: relative;
    padding: 5rem 0 4rem;
    overflow: hidden;

    background:
        /* Warm golden glow (left) */
        radial-gradient(circle at 15% 20%,
            rgba(255, 214, 153, 0.55) 0%,
            rgba(255, 214, 153, 0.18) 22%,
            transparent 50%),

        /* Soft coral glow (right) */
        radial-gradient(circle at 85% 18%,
            rgba(189, 54, 64, 0.22) 0%,
            rgba(189, 54, 64, 0.08) 20%,
            transparent 45%),

        /* Light teal glow (bottom center) */
        radial-gradient(circle at 50% 100%,
            rgba(31, 111, 139, 0.08) 0%,
            transparent 45%),

        /* Main gradient */
        linear-gradient(135deg,
            #fffaf2 0%,
            #ffffff 45%,
            #fff9fb 100%);

    border-top: 1px solid rgba(11, 79, 108, 0.05);
    border-bottom: 1px solid rgba(11, 79, 108, 0.05);
}

/* Optional subtle texture overlay */
.book-selection-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%,
            rgba(255, 255, 255, 0.55),
            transparent 25%),
        radial-gradient(circle at 80% 25%,
            rgba(255, 255, 255, 0.35),
            transparent 20%);
    pointer-events: none;
}

/* Title */
.book-selection-intro .section-title {
    font-size: clamp(2.5rem, 5vw, 4.2rem);
    font-weight: 850;
    color: #0b4f6c;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
    text-shadow: 0 2px 10px rgba(11, 79, 108, 0.05);
}

/* Subtitle */
.book-selection-intro .section-subtitle {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.15rem;
    line-height: 1.9;
    color: #5b6470;
}

/* Divider icon */
.book-selection-intro .books-divider {
    margin-top: 1.75rem;
    font-size: 2rem;
    opacity: 0.95;
}

/* ==========================================
   BOOK SELECTION CARDS SECTION
   Creates visual separation from the intro
========================================== */
.book-selection-section {
    position: relative;
    padding: 4.5rem 0 5rem;

    background:
        radial-gradient(circle at top center,
            rgba(189, 54, 64, 0.06),
            transparent 35%),
        linear-gradient(180deg,
            #ffffff 0%,
            #fffaf7 45%,
            #fff5ef 100%);

    border-top: 1px solid rgba(11, 79, 108, 0.05);
}

/* Optional subtle top fade */
.book-selection-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.85),
            rgba(255, 255, 255, 0));
    pointer-events: none;
}

/* Ensure cards appear above pseudo-element */
.book-selection-section .container {
    position: relative;
    z-index: 1;
}

/* ==========================================
   MERCH PAGE
========================================== */

.merch-page {
    background: linear-gradient(180deg, #f8fcff 0%, #ffffff 45%, #fff8f3 100%);
}

/* ==========================================
   MERCH INTRO SECTION
========================================== */

.merch-intro {
    position: relative;
    padding: 5rem 0 4rem;
    background:
        radial-gradient(circle at top right, rgba(239, 93, 115, 0.08), transparent 45%),
        radial-gradient(circle at top left, rgba(31, 111, 139, 0.08), transparent 40%),
        linear-gradient(180deg, #ffffff 0%, #f8fcfe 100%);
}

.merch-intro .books-badge {
    display: inline-block;
    padding: 0.55rem 1.2rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #bd3640, #f37a5d);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 10px 25px rgba(239, 93, 115, 0.25);
}

.merch-intro .section-title {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(135deg, #1f6f8b 0%, #bd3640 55%, #f37a5d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.merch-intro .section-subtitle {
    max-width: 720px;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #5f7280;
    margin-top: 1rem;
}

.merch-intro .books-divider {
    margin-top: 1.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.merch-intro .books-divider span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    font-size: 1.8rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 14px 35px rgba(31, 111, 139, 0.12);
    border: 1px solid rgba(31, 111, 139, 0.08);
    transition: transform 0.3s ease;
}

.merch-intro .books-divider span:hover {
    transform: translateY(-4px) scale(1.05);
}

/* ==========================================
   MERCH SECTION
========================================== */

.merch-section {
    background: transparent;
}

/* ==========================================
   MERCH CARD
========================================== */

.merch-card {
    height: 100%;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(31, 111, 139, 0.12);
    box-shadow: 0 14px 35px rgba(31, 111, 139, 0.10);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.merch-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(31, 111, 139, 0.18);
}

/* ==========================================
   IMAGE AREA
========================================== */

.merch-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #eaf7fb, #fff3f0);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.merch-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.25s ease;
}

.merch-card:hover .merch-img {
    transform: scale(1.04);
}

/* ==========================================
   COLOR SWATCHES BELOW IMAGE
========================================== */

.merch-colors {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 1rem 0.25rem;
    background: #ffffff;
}

.color-option {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.color-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.color-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(31, 111, 139, 0.18);
    transition: all 0.2s ease;
}

.color-option:hover .color-swatch {
    transform: scale(1.08);
}

.color-option input:checked+.color-swatch {
    transform: scale(1.15);
    box-shadow:
        0 0 0 2px #1f6f8b,
        0 0 0 5px rgba(31, 111, 139, 0.10);
}

/* ==========================================
   CARD BODY
========================================== */

.merch-card-body {
    padding: 1.5rem;

    display: flex;
    flex-direction: column;

    flex: 1;
    height: auto;
}

.merch-card-body h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1f6f8b;
    margin-bottom: 0.75rem;
}

.merch-card-body p {
    color: #5f6f73;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

/* ==========================================
   FAVORITE BUTTON
========================================== */

.merch-actions {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.merch-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    max-width: 180px;
    padding: 0.7rem 1rem;
    background: #ffffff;
    border: 1px solid rgba(31, 111, 139, 0.15);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f6f8b;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
}

.merch-icon-btn span {
    display: inline-block;
    line-height: 1;
}

.merch-icon-btn:hover,
.merch-icon-btn:focus {
    background: #f0f9fc;
    border-color: rgba(31, 111, 139, 0.25);
    color: #bd3640;
    transform: translateY(-2px);
}

.favorite-btn i {
    margin-right: 0.4rem;
}

/* ==========================================
   SHARE BUTTON / DROPDOWN
========================================== */

.merch-share-toggle {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    z-index: 3;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    color: #1f6f8b;
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(31, 111, 139, 0.15);
    cursor: pointer;
    transition: all 0.25s ease;
}

.merch-share-toggle:hover,
.merch-share-toggle:focus {
    background: #f0f9fc;
    color: #bd3640;
    transform: translateY(-2px);
}

.merch-share-toggle i {
    font-size: 1rem;
    line-height: 1;
}

.merch-share-menu {
    position: absolute;
    top: 3.4rem;
    right: 0.8rem;
    z-index: 4;
    width: 165px;
    background: #ffffff;
    border: 1px solid rgba(31, 111, 139, 0.15);
    border-radius: 14px;
    box-shadow: 0 14px 35px rgba(31, 111, 139, 0.18);
    overflow: hidden;
    display: none;
}

.merch-share-menu.is-open {
    display: block;
}

.share-option {
    display: block;
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: none;
    background: #ffffff;
    color: #1f6f8b;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.share-option:hover,
.share-option:focus {
    background: #f0f9fc;
    color: #bd3640;
}

.share-option i {
    width: 18px;
    font-size: 1rem;
    text-align: center;
    flex-shrink: 0;
}

/* ==========================================
   PURCHASE BUTTON
========================================== */

.merch-purchase-btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 999px;
    padding: 0.9rem 1.25rem;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    background: linear-gradient(135deg, #bd3640, #f37a5d);
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(239, 93, 115, 0.25);
    transition: all 0.25s ease;
}

.merch-purchase-btn:hover,
.merch-purchase-btn:focus {
    color: #ffffff !important;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(239, 93, 115, 0.35);
}

.merch-purchase-btn::after {
    content: none;
    display: none;
}

.merch-purchase-btn:hover::after {
    content: none;
    display: none;
}

/* ==========================================
   COMING SOON SECTION
========================================== */

.merch-coming-soon {
    background: linear-gradient(135deg, #fff3f0, #eaf7fb);
}

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

@media (max-width: 768px) {
    .merch-intro {
        padding: 4rem 0 3rem;
    }

    .merch-intro .section-title {
        font-size: 2rem;
    }

    .merch-intro .section-subtitle {
        font-size: 1rem;
        line-height: 1.7;
    }

    .merch-intro .books-divider span {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .merch-card-body {
        padding: 1.25rem;
    }

    .merch-icon-btn {
        max-width: 100%;
        font-size: 0.8rem;
    }

    .merch-purchase-btn {
        padding: 0.85rem 1rem;
        font-size: 0.95rem;
    }
}


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

#loginModal .books-badge {
    display: inline-block;
    padding: 0.55rem 1.2rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #bd3640, #f37a5d);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 10px 25px rgba(239, 93, 115, 0.25);
}

#loginModal h2 {
    color: #1f6f8b;
    font-weight: 800;
    letter-spacing: -0.02em;
}

#loginModal .text-muted {
    color: #6c757d !important;
}

/* ==========================================
   CLOSE BUTTON
========================================== */

#loginModal .btn-close {
    opacity: 0.6;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#loginModal .btn-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

/* ==========================================
   NAV TABS
========================================== */

#loginModal .nav-pills {
    gap: 0.75rem;
}

#loginModal .nav-pills .nav-link {
    background: #f4f8fb;
    color: #5f7280;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    border: 1px solid transparent;
    transition: all 0.25s ease;
}

#loginModal .nav-pills .nav-link:hover {
    background: #edf6fa;
    color: #1f6f8b;
}

#loginModal .nav-pills .nav-link.active {
    background: linear-gradient(135deg, #1f6f8b, #2c8cab);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(31, 111, 139, 0.22);
}

/* ==========================================
   FORM LABELS
========================================== */

#loginModal .form-label {
    color: #1f6f8b;
    font-size: 0.92rem;
    margin-bottom: 0.45rem;
}

/* ==========================================
   FORM INPUTS
========================================== */

#loginModal .form-control {
    border: 1px solid rgba(31, 111, 139, 0.12);
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    box-shadow: none;
    transition: all 0.25s ease;
}

#loginModal .form-control::placeholder {
    color: #9aa7b2;
}

#loginModal .form-control:focus {
    border-color: rgba(31, 111, 139, 0.35);
    box-shadow: 0 0 0 0.25rem rgba(31, 111, 139, 0.10);
}

/* ==========================================
   LINKS
========================================== */

#loginModal a {
    color: #1f6f8b;
    font-weight: 600;
    transition: color 0.2s ease;
}

#loginModal a:hover {
    color: #bd3640;
}

/* ==========================================
   BUTTONS
========================================== */

#loginModal .merch-purchase-btn {
    margin-top: 0;
}

/* ==========================================
   FOOTER NOTE
========================================== */

#loginModal small {
    font-size: 0.82rem;
    line-height: 1.5;
}

/* ==========================================
   MODAL BACKDROP
========================================== */

.modal-backdrop.show {
    opacity: 0.6;
}

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

@media (max-width: 576px) {
    #loginModal .modal-dialog {
        margin: 1rem;
    }

    #loginModal .modal-content {
        border-radius: 1.25rem;
    }

    #loginModal .modal-header,
    #loginModal .modal-body {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    #loginModal h2 {
        font-size: 1.35rem;
    }

    #loginModal .nav-pills .nav-link {
        font-size: 0.9rem;
        padding: 0.7rem 1rem;
    }

    #loginModal .form-control {
        padding: 0.8rem 0.95rem;
        font-size: 0.95rem;
    }
}

/* ==========================================
   AVATAR PREVIEW
========================================== */

.avatar-preview {
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar-preview-img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    /* Makes image fill the circle */
    object-position: center;
    display: block;

    /* Optional styling */
    border: 3px solid #d9e6ee;
    box-shadow: 0 8px 20px rgba(31, 111, 139, 0.12);
}

/* ==========================================
   AVATAR DROPDOWN STYLING
========================================== */

#signupAvatar {
    font-family: "Poppins", sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: #1f6f8b;
    background-color: #ffffff;
    border: 2px solid #d9e6ee;
    border-radius: 14px;
    padding: 0.85rem 1rem;
    box-shadow: 0 6px 16px rgba(31, 111, 139, 0.08);
    transition: all 0.3s ease;
}

#signupAvatar:focus {
    border-color: #1f6f8b;
    box-shadow: 0 0 0 0.25rem rgba(31, 111, 139, 0.15);
    outline: none;
}

/* Style dropdown options */
#signupAvatar option {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #1f6f8b;
}

/* ==========================================
   PASSWORD TOGGLE
========================================== */

.password-wrapper {
    position: relative;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #7a8a99;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    z-index: 5;
    transition: color 0.2s ease;
}

.password-toggle:hover {
    color: #1f6f8b;
}

.password-toggle:focus {
    outline: none;
    color: #1f6f8b;
}

/* ==========================================
   USER AVATAR IN NAVBAR
========================================== */

.user-avatar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.user-avatar-nav img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    display: block;

    /* Styling */
    border: 2px solid #ffffff;
    box-shadow:
        0 6px 16px rgba(31, 111, 139, 0.18),
        0 0 0 2px rgba(31, 111, 139, 0.08);

    transition: all 0.3s ease;
}

.user-avatar-nav img:hover {
    transform: scale(1.05);
    box-shadow:
        0 8px 20px rgba(31, 111, 139, 0.22),
        0 0 0 2px rgba(31, 111, 139, 0.12);
}

/* Mobile spacing */
@media (max-width: 1199.98px) {
    .user-avatar-nav {
        margin-top: 0.75rem;
        justify-content: flex-start;
    }
}



/* ==========================================
   FAVORITES PAGE - MATCH MERCH SHARE BUTTON
========================================== */

.favorites-page .merch-img-wrap {
    position: relative;
}

.favorites-page .merch-share-dropdown {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 10;
}

.favorites-page .merch-share-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: #ffffff;
    color: #0b6f8f;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.favorites-page .merch-share-btn::after {
    display: none;
}

.favorites-page .dropdown-menu {
    border: none;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.15);
}

.favorites-page .dropdown-item {
    color: #006b8f;
    font-weight: 700;
    padding: 10px 12px;
}

.favorites-page .dropdown-item i {
    width: 20px;
}

/* ==========================================
   CUSTOM TOAST NOTIFICATION
========================================== */

.custom-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #0b6f8f;
    color: #ffffff;
    padding: 14px 22px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 9999;
}

.custom-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
FAVORITE BUTTON Global default for Merch,
Books,
and Favorites==========================================*/
.favorite-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;

    /* Slightly smaller than Purchase / Download button */
    width: 68%;
    max-width: 240px;

    padding: 0.65rem 1.2rem;
    margin: 0.75rem auto 1.25rem;

    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;

    border: 1px solid rgba(11, 111, 143, 0.18);
    border-radius: 999px;

    background: #ffffff;
    color: #0b6f8f;
    text-decoration: none;

    transition: all 0.3s ease;
}

.favorite-btn i {
    font-size: 0.9rem;
}

.favorite-btn:hover {
    background: #f5fbfd;
    border-color: rgba(11, 111, 143, 0.28);
    color: #0b6f8f;
    transform: translateY(-1px);
}

.favorite-btn.is-favorited {
    color: #0b6f8f;
}

.favorite-btn.is-favorited i {
    color: #0b6f8f;
}


/* ==========================================
   ABOUT PAGE FEATURE ICONS
========================================== */

.about-page .create-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    margin: 0 auto 1.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #eef8fc, #ffffff);
    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Icon gradient */
.about-page .create-icon .fa-solid,
.about-page .create-icon .fa-regular,
.about-page .create-icon .fa-brands,
.about-page .create-icon i {
    font-size: 4.25rem !important;
    line-height: 1 !important;
    display: block !important;
    background: linear-gradient(135deg, #bd3640, #d85a4c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent !important;
}

/* Card styling */
.about-page .create-card {
    background: #ffffff;
    border: 1px solid rgba(31, 78, 121, 0.08);
    border-radius: 1.5rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
    transition: all 0.3s ease;
}

.about-page .create-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.10);
}

/* Title gradient */
.about-page .create-card h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #bd3640, #d85a4c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.about-page .create-card p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #5b667a;
    margin-bottom: 0;
}

/* ==========================================================
   KEEP THE COMPASS POPUP
========================================================== */

#ktc-popup {

    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, .70);

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

    padding: 20px;

    opacity: 0;
    visibility: hidden;

    transition: .35s ease;

    z-index: 99999;
}

#ktc-popup.show {

    opacity: 1;
    visibility: visible;

}

.ktc-card {

    position: relative;

    width: min(480px, 92vw);
    max-height: 90vh;

    background: #ffffff;
    border-radius: 18px;

    overflow-y: auto;
    overflow-x: hidden;

    box-shadow: 0 25px 70px rgba(0, 0, 0, .35);

    animation: popupRise .35s ease;

    text-align: center;

    padding: 30px;
}

@keyframes popupRise {

    from {

        transform: translateY(30px);
        opacity: 0;

    }

    to {

        transform: translateY(0);
        opacity: 1;

    }

}

.ktc-close {

    position: absolute;

    top: 18px;
    right: 18px;

    width: 36px;
    height: 36px;

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

    padding: 0;
    margin: 0;

    border: none;
    outline: none;

    background: linear-gradient(135deg, #ef5b73, #f67a7a);

    border-radius: 50%;

    cursor: pointer;

    color: #fff;

    font-size: 18px;
    font-weight: 700;
    line-height: 1;

    box-shadow: 0 6px 18px rgba(239, 91, 115, .35);

    transition: all .25s ease;

    appearance: none;
    -webkit-appearance: none;

}

.ktc-close:hover {

    transform: scale(1.10);

    background: linear-gradient(135deg, #e64c66, #ef5b73);

    color: #fff;

}

.ktc-badge {

    display: inline-block;

    background: linear-gradient(135deg, #ef5b73, #f67a7a);

    color: #fff;

    padding: 8px 18px;

    border-radius: 999px;

    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 18px;

    font-size: .8rem;

}

.ktc-card img {

    width: 190px;

    border-radius: 10px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .20);

    margin-bottom: 22px;

}

.ktc-card h2 {

    margin-bottom: 15px;

    color: #1E2A44;

    font-size: 1.8rem;

}

.ktc-card p {

    color: #555;

    line-height: 1.7;

    margin-bottom: 28px;

}

/* NEW BUTTON WRAPPER */

.ktc-popup-actions {

    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;

}

/* ==========================================================
   KEEP THE COMPASS PREMIUM POPUP BUTTONS
========================================================== */

.ktc-button,
.ktc-trailer-button {

    position: relative;
    isolation: isolate;
    overflow: hidden;

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

    width: 100%;
    min-height: 54px;

    padding: 0.9rem 1.25rem;

    border-radius: 999px;

    color: #ffffff !important;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;

}


/* ==========================================================
   RED AMAZON BUTTON
========================================================== */

.ktc-button {

    border: 1px solid rgba(153, 24, 37, 0.18);

    background:
        linear-gradient(180deg,
            #e04c59 0%,
            #c93441 52%,
            #b72230 100%);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.28),
        inset 0 -2px 0 rgba(119, 15, 28, 0.12),
        0 10px 22px rgba(189, 54, 64, 0.28);

}


/* ==========================================================
   BLUE TRAILER BUTTON
========================================================== */

.ktc-trailer-button {

    gap: 8px;

    border: 1px solid rgba(20, 62, 82, 0.25);

    background:
        linear-gradient(180deg,
            #3b8fb0 0%,
            #28789a 52%,
            #1f6f8b 100%);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.28),
        inset 0 -2px 0 rgba(12, 55, 73, 0.16),
        0 10px 22px rgba(31, 111, 139, 0.28);

}


/* ==========================================================
   GLOSSY HIGHLIGHT
========================================================== */

.ktc-button::before,
.ktc-trailer-button::before {

    content: "";

    position: absolute;
    z-index: -1;

    top: 3px;
    left: 10%;
    right: 10%;

    height: 42%;

    border-radius: 999px;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.42),
            rgba(255, 255, 255, 0.08));

    pointer-events: none;

}


/* ==========================================================
   RED BUTTON HOVER
========================================================== */

.ktc-button:hover,
.ktc-button:focus {

    color: #ffffff !important;

    background:
        linear-gradient(180deg,
            #e95a66 0%,
            #cf3543 52%,
            #ad1f2c 100%);

    transform: translateY(-2px);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.34),
        inset 0 -2px 0 rgba(119, 15, 28, 0.14),
        0 14px 28px rgba(189, 54, 64, 0.36);

}


/* ==========================================================
   BLUE BUTTON HOVER
========================================================== */

.ktc-trailer-button:hover,
.ktc-trailer-button:focus {

    color: #ffffff !important;

    background:
        linear-gradient(180deg,
            #47a0c0 0%,
            #2c82a4 52%,
            #185d77 100%);

    transform: translateY(-2px);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.34),
        inset 0 -2px 0 rgba(12, 55, 73, 0.16),
        0 14px 28px rgba(31, 111, 139, 0.36);

}


/* ==========================================================
   PRESSED STATE
========================================================== */

.ktc-button:active,
.ktc-trailer-button:active {

    transform: translateY(0);

}

.ktc-button:active {

    box-shadow:
        inset 0 2px 5px rgba(110, 12, 24, 0.20),
        0 6px 14px rgba(189, 54, 64, 0.24);

}

.ktc-trailer-button:active {

    box-shadow:
        inset 0 2px 5px rgba(9, 54, 72, 0.22),
        0 6px 14px rgba(31, 111, 139, 0.24);

}

.ktc-trailer-button:active {

    transform: translateY(1px);

}

@media(max-width:600px) {

    .ktc-card {

        padding: 22px;

    }

    .ktc-card img {

        width: 150px;

    }

    .ktc-card h2 {

        font-size: 1.5rem;

    }

}

@media (max-width:600px) {

    #ktc-popup {

        padding: 12px;
        align-items: center;

    }

    .ktc-card {

        width: 100%;
        max-height: 94vh;

        padding: 22px 18px;

        border-radius: 16px;

    }

    .ktc-card img {

        width: 160px;

        margin-bottom: 18px;

    }

    .ktc-card h2 {

        font-size: 1.65rem;

        margin-bottom: 12px;

    }

    .ktc-card p {

        font-size: .95rem;

        line-height: 1.55;

        margin-bottom: 22px;

    }

    .ktc-button,
    .ktc-trailer-button {

        width: 100%;

    }

    .ktc-close {

        top: 12px;
        right: 12px;

        width: 34px;
        height: 34px;

    }

}

/* ==========================================================
   KEEP THE COMPASS CINEMATIC TRAILER
========================================================== */

.ktc-trailer-modal {

    position: fixed;
    inset: 0;
    z-index: 99999;

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

    padding: 40px;

    background:
        radial-gradient(circle at top, #32476d 0%, #121c31 40%, #06090f 100%);

    backdrop-filter: blur(10px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: .35s;

}

.ktc-trailer-modal.is-open {

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

}

.ktc-trailer-dialog {

    position: relative;

    width: min(1300px, 100%);
    min-height: 720px;

    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 60px;

    align-items: center;

    padding: 60px;

    border-radius: 28px;

    overflow: hidden;

    background:

        linear-gradient(145deg,
            rgba(36, 49, 76, .97),
            rgba(16, 22, 36, .97));

    box-shadow:
        0 40px 120px rgba(0, 0, 0, .60),
        inset 0 1px rgba(255, 255, 255, .06);

}

.ktc-trailer-dialog::before {

    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at right,
            rgba(239, 91, 115, .08),
            transparent 55%);

    pointer-events: none;

}

/* LEFT SIDE */

.ktc-trailer-branding {

    position: relative;
    z-index: 2;

}

.ktc-trailer-eyebrow {

    color: #f6b34f;

    text-transform: uppercase;

    letter-spacing: 3px;

    font-size: .82rem;

    margin-bottom: 18px;

}

.ktc-trailer-branding h2 {

    color: #fff;

    font-size: 3rem;

    line-height: 1.05;

    margin-bottom: 16px;

}

.ktc-trailer-subtitle {

    color: #d7dde8;

    font-size: 1.25rem;

    line-height: 1.6;

}

.ktc-trailer-divider {

    width: 90px;
    height: 4px;

    margin: 32px 0;

    border-radius: 20px;

    background: #ef5b73;

}

.ktc-trailer-description {

    color: #bfc8d8;

    line-height: 1.8;

    margin-bottom: 34px;

}

.ktc-trailer-amazon {

    display: inline-flex;

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

    padding: 15px 34px;

    border-radius: 12px;

    text-decoration: none;

    color: #fff;

    font-weight: 700;

    background:
        linear-gradient(to bottom,
            #ff8d9c,
            #ef5b73);

    box-shadow:
        0 18px 40px rgba(239, 91, 115, .35);

    transition: .25s;

}

.ktc-trailer-amazon:hover {

    transform: translateY(-3px);

}

/* RIGHT SIDE */

.ktc-trailer-video-stage {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

}

.ktc-trailer-glow {

    position: absolute;

    width: 420px;
    height: 620px;

    border-radius: 40px;

    background:

        radial-gradient(circle,
            rgba(239, 91, 115, .22),
            transparent 70%);

    filter: blur(45px);

}

.ktc-trailer-video-frame {

    position: relative;

    z-index: 2;

    border-radius: 26px;

    overflow: hidden;

    border: 3px solid rgba(255, 255, 255, .10);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .55);

}

#ktc-trailer-video {

    display: block;

    width: 420px;

    height: auto;

    background: #000;

}

.ktc-trailer-caption {

    margin-top: 20px;

    color: #9da9bd;

    letter-spacing: 2px;

    text-transform: uppercase;

    font-size: .8rem;

}

/* CLOSE */

.ktc-trailer-close {

    position: absolute;

    top: 25px;
    right: 25px;

    width: 52px;
    height: 52px;

    border: none;

    border-radius: 50%;

    background: #1f2b44;

    color: #fff;

    font-size: 2rem;

    cursor: pointer;

    transition: .25s;

}

.ktc-trailer-close:hover {

    background: #ef5b73;

    transform: rotate(90deg);

}

/* ==========================================================
   KEEP THE COMPASS BOOK COVER
========================================================== */

.ktc-trailer-book-display {

    display: flex;
    justify-content: center;

    margin-top: 34px;

    perspective: 1000px;

}

.ktc-trailer-book-cover {

    display: block;

    width: 145px;
    height: auto;

    border-radius: 4px;

    transform:
        rotateY(-8deg) rotateZ(-1deg);

    transform-origin: center;

    box-shadow:
        16px 20px 34px rgba(0, 0, 0, 0.46),
        -2px 2px 0 rgba(255, 255, 255, 0.10);

    animation:
        ktcBookFloat 4s ease-in-out infinite;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

}

.ktc-trailer-book-cover:hover {

    transform:
        rotateY(0deg) rotateZ(0deg) translateY(-5px) scale(1.04);

    box-shadow:
        18px 28px 42px rgba(0, 0, 0, 0.56),
        0 0 24px rgba(246, 179, 79, 0.18);

}

@keyframes ktcBookFloat {

    0%,
    100% {

        transform:
            rotateY(-8deg) rotateZ(-1deg) translateY(0);

    }

    50% {

        transform:
            rotateY(-6deg) rotateZ(0deg) translateY(-8px);

    }

}


/* MOBILE */

@media(max-width:980px) {

    .ktc-trailer-dialog {

        grid-template-columns: 1fr;

        padding: 35px;

        gap: 35px;

        text-align: center;

        min-height: auto;

    }

    .ktc-trailer-divider {

        margin-inline: auto;

    }

    .ktc-trailer-branding h2 {

        font-size: 2.2rem;

    }

    #ktc-trailer-video {

        width: min(100%, 360px);

    }

    .ktc-trailer-glow {

        width: 100%;
        height: 100%;

    }

}

@media (max-width: 700px) {

    .ktc-trailer-modal {

        padding: 12px;

    }

    .ktc-trailer-dialog {

        border-radius: 12px;

    }

    .ktc-trailer-close {

        top: 8px;
        right: 8px;

        width: 40px;
        height: 40px;

        font-size: 1.7rem;

    }

}

/* ==========================================================
   HOMEPAGE REDESIGN
   Parent-focused hero and resource cards
========================================================== */

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

.hero-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fffdf9;
}

.hero-container {
    position: relative;
    display: block;

    width: 100%;
    max-width: none;
    min-height: 620px;

    margin: 0 auto;

    overflow: hidden;
    background: #fffdf9;
}

/* ==========================================================
   HERO LEFT CONTENT
========================================================== */

.hero-content {
    position: relative;
    z-index: 4;
    width: 48%;
    max-width: 860px;
    min-height: 620px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5rem 2.5rem 5rem clamp(4rem, 5vw, 6rem);
    margin-left: clamp(3rem, 7vw, 8rem);
}

.hero-eyebrow {
    display: inline-flex;
    align-self: flex-start;
    margin: 0 0 1.25rem;
    padding: 0.55rem 1.1rem;

    border-radius: 999px;
    background: rgba(199, 57, 65, 0.10);
    color: #b62f39;

    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-content h1 {
    max-width: 720px;
    margin: 0 0 1.5rem;

    color: #173754;
    font-size: clamp(2.7rem, 4.6vw, 5rem);
    font-weight: 850;
    line-height: 1.04;
    letter-spacing: -0.045em;
}

.hero-description {
    max-width: 680px;
    margin: 0 0 2rem;

    color: #526272;
    font-size: 1.08rem;
    line-height: 1.8;
}

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

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.2rem;
}

.hero-primary-btn,
.hero-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;
    padding: 0.9rem 1.8rem;

    border-radius: 12px;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

/* Glossy red primary button */
.hero-primary-btn {
    position: relative;
    overflow: hidden;

    color: #ffffff;
    border: 1px solid #a8212c;

    background:
        linear-gradient(180deg,
            #e75d66 0%,
            #cc3945 46%,
            #a91f2c 100%);

    box-shadow:
        0 12px 24px rgba(169, 31, 44, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -2px 4px rgba(91, 10, 18, 0.22);
}

.hero-primary-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    width: 84%;
    height: 46%;

    border-radius: 999px;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.48),
            rgba(255, 255, 255, 0));

    pointer-events: none;
}

.hero-primary-btn:hover {
    color: #ffffff;
    transform: translateY(-3px);

    background:
        linear-gradient(180deg,
            #ef6871 0%,
            #d6404c 46%,
            #b52532 100%);

    box-shadow:
        0 16px 32px rgba(169, 31, 44, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -2px 4px rgba(91, 10, 18, 0.22);
}

/* Secondary button */
.hero-secondary-btn {
    color: #173754;
    border: 1px solid rgba(23, 55, 84, 0.22);
    background: rgba(255, 255, 255, 0.72);

    box-shadow:
        0 8px 20px rgba(23, 55, 84, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.hero-secondary-btn:hover {
    color: #173754;
    background: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(23, 55, 84, 0.14);
}

/* ==========================================================
   HERO TRUST ROW
========================================================== */

.hero-trust-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.8rem;
}

.hero-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;

    color: #485b6c;
    font-size: 0.92rem;
    font-weight: 700;
}

.hero-trust-item i {
    color: #bd3640;
    font-size: 1rem;
}

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

.hero-image-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 75%;
    min-height: 620px;
    margin: 0;
    overflow: hidden;
}

.hero-family-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 620px;
    object-fit: cover;
    object-position: 82% center;
    transform: none;
}


/* ==========================================================
   RESPONSIVE HERO PICTURE
========================================================== */

.hero-picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-picture source {
    display: none;
}

.hero-picture .hero-family-image {
    display: block;
    width: 100%;
    height: 100%;
}

/* Creates the faded image edge */
.hero-image-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;

    background: linear-gradient(90deg,
            #fffdf9 0%,
            rgba(255, 253, 249, 0.92) 4%,
            rgba(255, 253, 249, 0.65) 9%,
            rgba(255, 253, 249, 0.28) 14%,
            rgba(255, 253, 249, 0.08) 19%,
            rgba(255, 253, 249, 0) 24%);

    pointer-events: none;
}

/* Optional soft darkening on far right for depth */
.hero-image-panel::after {
    display: none;
}

.hero-image-fade {
    display: none;
}

/* ==========================================================
   MISSION STRIP
========================================================== */

.hero-mission-strip {
    position: relative;
    z-index: 5;

    padding: 1.5rem 1.25rem;

    background:
        linear-gradient(135deg,
            #15344e 0%,
            #1e4d68 55%,
            #173b57 100%);

    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 28px rgba(15, 39, 57, 0.18);
}

.hero-mission-content {
    max-width: 1120px;
    margin: 0 auto;
    text-align: center;
}

.hero-mission-content p {
    margin: 0;

    color: rgba(255, 255, 255, 0.94);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.7;
}

/* ==========================================================
   WHAT WE OFFER SECTION
========================================================== */

.what-we-create {
    position: relative;
    padding: 5.5rem 0;
    background:
        radial-gradient(circle at top left,
            rgba(198, 56, 66, 0.06),
            transparent 32%),
        linear-gradient(180deg,
            #fffdf9 0%,
            #f7f3eb 100%);
}

.what-we-create-heading {
    max-width: 780px;
    margin: 0 auto 3.5rem;
}

.section-eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;

    border-radius: 999px;
    background: rgba(190, 52, 62, 0.10);
    color: #b52e39;

    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.what-we-create .section-title {
    margin-bottom: 1rem;

    color: #173754;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.what-we-create .section-subtitle {
    max-width: 720px;
    margin: 0 auto;

    color: #5b6977;
    font-size: 1.05rem;
    line-height: 1.8;
}

/* ==========================================================
   SUPPORT CARDS
========================================================== */

.support-card {
    position: relative;
    display: flex;
    flex-direction: column;

    padding: 2rem 1.7rem;
    border-radius: 20px;

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            #fffdfa 100%);

    border: 1px solid rgba(23, 55, 84, 0.09);

    box-shadow:
        0 14px 32px rgba(23, 55, 84, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.support-card:hover {
    transform: translateY(-7px);
    border-color: rgba(190, 52, 62, 0.18);

    box-shadow:
        0 24px 46px rgba(23, 55, 84, 0.14),
        0 8px 20px rgba(190, 52, 62, 0.06);
}

.support-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;
    margin-bottom: 1.4rem;

    border-radius: 16px;

    background:
        linear-gradient(145deg,
            #fbe8e9 0%,
            #ffffff 100%);

    box-shadow:
        0 10px 22px rgba(190, 52, 62, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.support-card-icon i {
    color: #bd3640;
    font-size: 1.7rem;
}

.support-card h3 {
    margin-bottom: 0.9rem;

    color: #173754;
    font-size: 1.28rem;
    font-weight: 850;
    line-height: 1.3;
}

.support-card p {
    flex-grow: 1;

    margin-bottom: 1.4rem;

    color: #5c6976;
    font-size: 0.96rem;
    line-height: 1.75;
}

.support-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    color: #b42f39;
    font-size: 0.94rem;
    font-weight: 800;
    text-decoration: none;

    transition:
        color 0.25s ease,
        gap 0.25s ease;
}

.support-card-link:hover {
    color: #8d1f28;
    gap: 0.75rem;
    text-decoration: none;
}

/* ==========================================================
   TABLET / SMALL LAPTOP
========================================================== */
@media (min-width: 878px) and (max-width: 1100px) {

    .hero-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: auto;
        overflow: hidden;
        background: #fffdf9;
    }

    .hero-content {
        position: relative;
        z-index: 4;

        width: 100%;
        max-width: none;
        min-height: auto;

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

        margin-left: 0;
        padding: 4.5rem 2.5rem 3.5rem;

        text-align: center;
    }

    .hero-eyebrow {
        align-self: center;
    }

    .hero-content h1,
    .hero-description {
        max-width: 760px;
    }

    .hero-buttons,
    .hero-trust-row {
        justify-content: center;
    }

    .hero-image-panel {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;

        width: 100%;
        min-height: 430px;

        margin: 0;
        padding: 0;

        overflow: hidden;
        border: none;
        box-shadow: none;
        background: #fffdf9;
    }

    .hero-family-image {
        display: block;

        width: 100%;
        height: 100%;
        min-height: 430px;

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

        border: none;
        transform: none;
    }

    .hero-image-panel::before {
        content: "";
        position: absolute;
        z-index: 2;
        inset: 0;

        background: linear-gradient(180deg,
                #fffdf9 0%,
                rgba(255, 253, 249, 0.72) 12%,
                rgba(255, 253, 249, 0.18) 30%,
                rgba(255, 253, 249, 0) 48%);

        pointer-events: none;
    }
}

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

@media (max-width: 877px) {

    .hero-container {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    .hero-content {
        width: 100%;
        max-width: none;
        min-height: auto;
        margin-left: 0;
        padding: 4.5rem 2rem 3.5rem;
        text-align: center;
        align-items: center;
    }


    .hero-eyebrow {
        align-self: center;
    }

    .hero-content h1,
    .hero-description {
        max-width: 760px;
    }

    .hero-buttons,
    .hero-trust-row {
        justify-content: center;
    }

    .hero-image-panel {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        min-height: 430px;
    }

    .hero-family-image {
        min-height: 430px;
        object-position: center center;
    }

    .hero-image-panel::before {
        background: linear-gradient(180deg,
                #fffdf9 0%,
                rgba(255, 253, 249, 0.72) 12%,
                rgba(255, 253, 249, 0.18) 30%,
                rgba(255, 253, 249, 0) 48%);
    }
}

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

@media (max-width: 576px) {

    .hero-content {
        padding: 3.5rem 1.25rem 2.75rem;
    }

    .hero-content h1 {
        font-size: 2.45rem;
        line-height: 1.08;
    }

    .hero-description {
        font-size: 1rem;
        line-height: 1.7;
    }

    .hero-buttons {
        width: 100%;
        flex-direction: column;
        gap: 0.8rem;
    }

    .hero-primary-btn,
    .hero-secondary-btn {
        width: 100%;
    }

    .hero-trust-row {
        gap: 0.8rem 1rem;
    }

    .hero-trust-item {
        font-size: 0.84rem;
    }

    .hero-image-panel {
        width: 100%;
        min-height: 330px;
    }

    .hero-family-image {
        min-height: 330px;
        object-position: center center;
    }

    .hero-mission-strip {
        padding: 1.35rem 1rem;
    }

    .hero-mission-content p {
        font-size: 0.92rem;
    }

    .what-we-create {
        padding: 4rem 0;
    }

    .what-we-create-heading {
        margin-bottom: 2.5rem;
    }

    .support-card {
        padding: 1.75rem 1.4rem;
    }
}

/* ==========================================================
   FLOATING HERO MISSION CARD
========================================================== */

.hero-section {
    position: relative;
}

.hero-mission-strip {
    position: absolute;
    right: 4%;
    bottom: 28px;
    left: auto;
    z-index: 10;

    width: min(500px, 36%);
    margin: 0;
    padding: 20px 26px;

    color: #ffffff;
    background: #173d5b;
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(13, 42, 66, 0.25);
}

.hero-mission-strip p {
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1100px) {
    .hero-mission-strip {
        right: 3%;
        bottom: 22px;
        width: min(430px, 48%);
        padding: 17px 21px;
    }

    .hero-mission-strip p {
        font-size: 0.92rem;
        line-height: 1.5;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .hero-mission-strip {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;

        width: calc(100% - 32px);
        max-width: 430px;
        margin: -24px auto 24px;
        padding: 17px 19px;

        border-radius: 16px;
        box-sizing: border-box;
    }
}

/* ==========================================================
   HERO TRUST ICON SIZE UPDATE
========================================================== */

.hero-trust-item i {
    font-size: 1.55rem !important;
    width: 42px;
    height: 42px;
    margin-right: 4px;
}

.hero-trust-item {
    gap: 12px;
}

.hero-trust-item span {
    font-size: 1rem;
    font-weight: 600;
}


/* ==========================================================
   KEEP HERO TRUST ITEMS ON ONE ROW
========================================================== */

.hero-trust-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 22px;
}

.hero-trust-item {
    flex: 0 0 auto;
    gap: 9px;
    white-space: nowrap;
}

.hero-trust-item i {
    width: 32px !important;
    height: 32px !important;
    font-size: 1.2rem !important;
    margin-right: 0;
}

.hero-trust-item span {
    font-size: 0.92rem;
}

/* Stack only on smaller mobile screens */
@media (max-width:576px) {
    .hero-trust-row {
        flex-wrap: wrap;
        gap: 14px 20px;
    }

    .hero-trust-item {
        white-space: normal;
    }
}


/* ==========================================================
   COMPACT SUPPORT CARDS
========================================================== */

.support-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 16px;
    align-items: start;
    min-height: 0;
    padding: 1.35rem 1.25rem;
    border-radius: 18px;
}

.support-card-icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 54px;
    height: 54px;
    margin: 0;
    border-radius: 50%;
}

.support-card-icon i {
    font-size: 1.45rem;
}

.support-card h3 {
    grid-column: 2;
    margin: 0 0 0.45rem;
    font-size: 1.05rem;
    line-height: 1.3;
}

.support-card p {
    grid-column: 2;
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
}

.support-card-link {
    grid-column: 2;
    margin-top: 0.7rem;
    font-size: 0.84rem;
}

@media (min-width: 768px) and (max-width: 1100px) {
    .support-card {
        grid-template-columns: 50px minmax(0, 1fr);
        column-gap: 13px;
        padding: 1.15rem;
    }

    .support-card-icon {
        width: 48px;
        height: 48px;
    }

    .support-card h3 {
        font-size: 0.98rem;
    }

    .support-card p {
        font-size: 0.84rem;
    }
}

@media (max-width: 767px) {
    .support-card {
        grid-template-columns: 54px minmax(0, 1fr);
        padding: 1.2rem;
    }
}

/* COMPACT CLICKABLE SUPPORT CARDS START */

.support-card {
    position: relative;
    min-height: 0;
    padding: 1.25rem 1.2rem;
    cursor: pointer;
}

.support-card h3 {
    margin-bottom: 0.4rem;
}

.support-card p {
    margin-bottom: 0;
    line-height: 1.5;
}

.support-card-link {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: transparent !important;
    font-size: 0;
    text-indent: -9999px;
}

.support-card-link i {
    display: none;
}

.support-card:focus-within {
    outline: 3px solid rgba(190, 52, 62, 0.28);
    outline-offset: 4px;
}

/* COMPACT CLICKABLE SUPPORT CARDS END */


/* ==========================================================
   HOMEPAGE SUPPORT SECTION SIMPLIFICATION
========================================================== */

/* Hide large heading and intro text */
.support-section h2,
.support-section .section-description {
    display: none;
}

/* Bring the cards closer to the badge */
.support-section .section-badge {
    margin-bottom: 1.5rem;
}

.support-grid {
    margin-top: 0;
}

.support-section {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
}


/* ==========================================================
   HOMEPAGE SUPPORT SECTION FINAL CLEANUP
========================================================== */

.what-we-create .section-title,
.what-we-create .section-subtitle {
    display: none !important;
}

.what-we-create {
    padding-top: 2.5rem !important;
    padding-bottom: 3rem !important;
}

.what-we-create .section-eyebrow {
    display: table;
    margin: 0 auto 1.5rem;
}

.what-we-create .row {
    margin-top: 0 !important;
}


/* ABOUT OFFER CARDS HOMEPAGE MATCH START */

.about-page .create-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 320px;
    height: 100%;
    padding: 1.65rem 1.35rem 1.55rem;

    background:
        radial-gradient(circle at top center,
            rgba(190, 52, 62, 0.045),
            transparent 42%),
        linear-gradient(180deg,
            #ffffff 0%,
            #fffdf9 100%);

    border: 1px solid rgba(23, 55, 84, 0.10);
    border-radius: 20px;

    box-shadow:
        0 18px 38px rgba(23, 55, 84, 0.08),
        0 5px 14px rgba(190, 52, 62, 0.035);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease !important;
}

.about-page .create-card:hover {
    transform: translateY(-7px) !important;
    border-color: rgba(190, 52, 62, 0.20);

    box-shadow:
        0 26px 48px rgba(23, 55, 84, 0.14),
        0 8px 20px rgba(190, 52, 62, 0.07) !important;
}

.about-page .create-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 88px;
    height: 88px;
    margin: 0 auto 1.3rem;

    border: 1px solid rgba(23, 55, 84, 0.06);
    border-radius: 50%;

    background:
        linear-gradient(145deg,
            #eef8fc 0%,
            #ffffff 100%);

    box-shadow:
        0 14px 30px rgba(23, 55, 84, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.about-page .create-icon .fa-solid,
.about-page .create-icon .fa-regular,
.about-page .create-icon .fa-brands,
.about-page .create-icon i {
    font-size: 3rem !important;
    line-height: 1 !important;

    background: linear-gradient(135deg, #bd3640, #f37a5d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    color: transparent !important;
}

.about-page .create-card h3 {
    margin: 0 0 0.8rem;

    color: #173754;
    font-size: clamp(1.45rem, 2vw, 1.75rem);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -0.025em;

    background: linear-gradient(135deg, #bd3640, #d85a4c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-page .create-card p {
    max-width: 230px;
    margin: 0 auto;

    color: #5c6976;
    font-size: 0.98rem;
    line-height: 1.65;
    text-align: center;
}

@media (min-width: 768px) and (max-width: 1100px) {
    .about-page .create-card {
        min-height: 300px;
        padding: 1.45rem 1.05rem;
    }

    .about-page .create-icon {
        width: 78px;
        height: 78px;
        margin-bottom: 1.15rem;
    }

    .about-page .create-icon i {
        font-size: 2.6rem !important;
    }

    .about-page .create-card h3 {
        font-size: 1.4rem;
    }

    .about-page .create-card p {
        font-size: 0.92rem;
        line-height: 1.55;
    }
}

@media (max-width: 767px) {
    .about-page .create-card {
        min-height: 0;
        padding: 1.5rem 1.25rem;
    }

    .about-page .create-icon {
        width: 78px;
        height: 78px;
        margin-bottom: 1rem;
    }

    .about-page .create-icon i {
        font-size: 2.55rem !important;
    }

    .about-page .create-card h3 {
        font-size: 1.45rem;
    }

    .about-page .create-card p {
        max-width: 290px;
        font-size: 0.95rem;
    }
}

/* ABOUT OFFER CARDS HOMEPAGE MATCH END */



/* ABOUT COMPASS DIVIDER START */

.about-page .books-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 1.35rem;
}

.about-page .books-divider::before,
.about-page .books-divider::after {
    content: "";
    width: 72px;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(189, 54, 64, 0.55));
}

.about-page .books-divider::after {
    background: linear-gradient(90deg,
            rgba(189, 54, 64, 0.55),
            transparent);
}

.about-page .books-divider span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;
    border: 1px solid rgba(189, 54, 64, 0.14);

    background: linear-gradient(145deg,
            #fff5f6 0%,
            #ffffff 100%);

    box-shadow:
        0 10px 24px rgba(23, 55, 84, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.about-page .books-divider i {
    color: #bd3640;
    font-size: 1.15rem;
    line-height: 1;
}

@media (max-width: 576px) {
    .about-page .books-divider {
        gap: 0.7rem;
        margin-top: 1.1rem;
    }

    .about-page .books-divider::before,
    .about-page .books-divider::after {
        width: 48px;
    }

    .about-page .books-divider span {
        width: 38px;
        height: 38px;
    }

    .about-page .books-divider i {
        font-size: 1rem;
    }
}

/* ABOUT COMPASS DIVIDER END */


/* ABOUT PAGE RED STANDARDIZATION START */

/*
   Every visible red, pink, coral, or orange-red accent
   on the About page uses this exact color.
*/
.about-page {
    --about-red: #bd3640;
    --about-red-rgb: 189, 54, 64;
}

/* ==========================================
   ALL SMALL SECTION BADGES
========================================== */

.about-page .books-badge,
.about-page .section-badge,
.about-page .section-eyebrow {
    background: var(--about-red) !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: var(--about-red) !important;
    box-shadow: none !important;
}

/* ==========================================
   OFFER CARD ICONS
========================================== */

.about-page .create-icon {
    border-color: var(--about-red) !important;
}

.about-page .create-icon i,
.about-page .create-icon svg {
    color: var(--about-red) !important;
    fill: var(--about-red) !important;

    background: none !important;
    background-image: none !important;

    -webkit-background-clip: initial !important;
    background-clip: initial !important;

    -webkit-text-fill-color: var(--about-red) !important;
}

/* ==========================================
   OFFER CARD TITLES
========================================== */

.about-page .create-card h3 {
    color: var(--about-red) !important;

    background: none !important;
    background-image: none !important;

    -webkit-background-clip: initial !important;
    background-clip: initial !important;

    -webkit-text-fill-color: var(--about-red) !important;
}

/* ==========================================
   SUPPORT CARD ICONS
========================================== */

.about-page .support-card-icon {
    border-color: var(--about-red) !important;
}

.about-page .support-card-icon i,
.about-page .support-card-icon svg {
    color: var(--about-red) !important;
    fill: var(--about-red) !important;
}

/* ==========================================
   COMPASS AND DIVIDER
========================================== */

.about-page .books-divider i,
.about-page .books-divider svg {
    color: var(--about-red) !important;
    fill: var(--about-red) !important;
}

.about-page .books-divider span {
    border-color: var(--about-red) !important;
}

.about-page .books-divider::before {
    background: linear-gradient(90deg,
            transparent,
            var(--about-red)) !important;
}

.about-page .books-divider::after {
    background: linear-gradient(90deg,
            var(--about-red),
            transparent) !important;
}

/* ==========================================
   ALL ABOUT-PAGE BUTTONS
========================================== */

.about-page .btn,
.about-page .purchase-btn,
.about-page .merch-purchase-btn,
.about-page .cta-buttons a {
    background: var(--about-red) !important;
    background-image: none !important;

    border-color: var(--about-red) !important;
    color: #ffffff !important;

    box-shadow:
        0 10px 24px rgba(var(--about-red-rgb), 0.22) !important;
}

.about-page .btn:hover,
.about-page .btn:focus,
.about-page .purchase-btn:hover,
.about-page .purchase-btn:focus,
.about-page .merch-purchase-btn:hover,
.about-page .merch-purchase-btn:focus,
.about-page .cta-buttons a:hover,
.about-page .cta-buttons a:focus {
    background: var(--about-red) !important;
    background-image: none !important;

    border-color: var(--about-red) !important;
    color: #ffffff !important;

    filter: brightness(0.92);
}

/* ==========================================
   OTHER ABOUT-PAGE RED ACCENTS
========================================== */

.about-page .create-link,
.about-page .accent-text,
.about-page .text-danger {
    color: var(--about-red) !important;
}

.about-page .border-danger {
    border-color: var(--about-red) !important;
}

/* ABOUT PAGE RED STANDARDIZATION END */


/* GLOBAL BOOK CARD ALIGNMENT START */

/*
   LITTLE HERO BOOK CARD COMPONENT
   Equal badge, cover, content, and action zones.
*/

.books-grid .row {
    align-items: stretch;
}

.books-grid .row>[class*="col-"] {
    display: flex;
}

.books-grid .book-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* Equal badge space on every card */
.books-grid .book-badge-slot {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Equal cover-display area */
.books-grid .book-cover-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 320px;
    padding: 0.5rem;
}

.books-grid .book-cover-link img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: contain;
    background: transparent;
}

/* Flexible content area */
.books-grid .book-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    padding: 1.25rem;
}

.books-grid .book-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Equal title zone */
.books-grid .book-info h3 {
    min-height: 112px;
    margin-bottom: 0.75rem;
}

/* Equal preview-description zone */
.books-grid .book-info p {
    min-height: 105px;
    margin-bottom: 1rem;
}

/* Action buttons remain aligned at the bottom */
.books-grid .favorite-btn {
    margin-top: auto;
    align-self: center;
}

.books-grid .purchase-btn {
    margin-top: 1.25rem;
    align-self: center;
}

/* Tablet adjustments */
@media (max-width: 991px) {
    .books-grid .book-cover-link {
        height: 300px;
    }

    .books-grid .book-info h3,
    .books-grid .book-info p {
        min-height: 0;
    }
}

/* Mobile cards should flow naturally */
@media (max-width: 576px) {
    .books-grid .book-cover-link {
        height: 290px;
    }

    .books-grid .book-badge-slot {
        min-height: 42px;
    }

    .books-grid .book-card-body {
        padding: 1.1rem;
    }
}

/* GLOBAL BOOK CARD ALIGNMENT END */


/* PARENTING BOOKS NATURAL FLOW START */

/*
   Prevent the Parenting Books cards from stretching vertically.
   Content now follows a natural top-to-bottom flow.
*/

body.parenting-page .books-grid .row {
    align-items: flex-start;
}

body.parenting-page .books-grid .row>[class*="col-"] {
    display: block;
}

body.parenting-page .book-card {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
}

/* Keep a small consistent badge row */
body.parenting-page .book-badge-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    min-height: 42px;
    padding: 0;
    margin: 0 0 0.75rem;
}

/* Keep covers consistent without stretching the full card */
body.parenting-page .book-cover-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 305px;
    padding: 0.5rem 1rem;
    margin: 0;
}

body.parenting-page .book-cover-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Remove all flexible stretching */
body.parenting-page .book-card-body {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 1.25rem;
}

body.parenting-page .book-info {
    display: block;
    height: auto;
    min-height: 0;
}

body.parenting-page .book-card-title {
    min-height: 0;
    margin: 0 0 0.45rem;
}

body.parenting-page .book-card-subtitle {
    min-height: 0;
    margin: 0 0 1rem;
}

body.parenting-page .book-card-description {
    min-height: 0;
    margin: 0;
}

/* Keep controls together directly below the description */
body.parenting-page .book-card-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

body.parenting-page .favorite-btn,
body.parenting-page .purchase-btn {
    margin-top: 0;
}

/* Tablet and mobile */
@media (max-width: 991px) {
    body.parenting-page .book-cover-link {
        height: 290px;
    }
}

@media (max-width: 576px) {
    body.parenting-page .book-cover-link {
        height: 275px;
    }

    body.parenting-page .book-card-body {
        padding: 1rem;
    }
}

/* PARENTING BOOKS NATURAL FLOW END */
/* ==========================================
   PARENTING CARD CONTENT — COLLECTION MATCH
========================================== */

body.parenting-page .book-info {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    min-height: 0;

    text-align: center;
}

/* Small category pill matching Pug Fu and Amaru */
body.parenting-page .parenting-card-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    min-height: 36px;

    margin: 0 auto 0.9rem;
    padding: 0.42rem 0.9rem;

    color: #a62d37;
    background: #f9e7e8;

    border-radius: 999px;

    box-shadow:
        0 3px 8px rgba(189, 54, 64, 0.08);

    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

/* Main book title */
body.parenting-page .book-card-title {
    display: block;

    min-height: 0;
    margin: 0 0 0.45rem;

    color: #123d56;

    font-size: 1.28rem;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -0.015em;
    text-align: center;
}

/* Supporting title line */
body.parenting-page .book-card-subtitle {
    display: block;

    min-height: 42px;
    margin: 0 0 1rem;

    color: #667085;

    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}

/* Description */
body.parenting-page .book-card-description {
    min-height: 88px;
    margin: 0;

    color: #667085;

    font-size: 0.96rem;
    line-height: 1.6;
    text-align: center;
}

@media (max-width: 576px) {

    body.parenting-page .parenting-card-label {
        font-size: 0.74rem;
    }

    body.parenting-page .book-card-title {
        font-size: 1.22rem;
    }

    body.parenting-page .book-card-subtitle,
    body.parenting-page .book-card-description {
        min-height: 0;
    }
}

/* PARENTING BOOKS COMPACT POLISH START */

/*
   Final compact layout for the Parenting Books storefront.
*/

body.parenting-page .books-grid {
    padding-top: 2rem !important;
    padding-bottom: 3rem !important;
}

body.parenting-page .books-grid .row {
    align-items: stretch;
}

body.parenting-page .books-grid .row>[class*="col-"] {
    display: flex;
}

body.parenting-page .book-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Badge floats above the first cover without creating empty space */
body.parenting-page .book-badge-slot {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    z-index: 2;

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

    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;
    margin: 0;
}

body.parenting-page .book-badge-slot:empty {
    display: none;
}

body.parenting-page .book-badge-slot .books-badge {
    margin: 0;
}

/* Shorter and cleaner cover area */
body.parenting-page .book-cover-link {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 290px;
    padding: 2.3rem 1rem 0.5rem;
    margin: 0;
}

body.parenting-page .book-cover-link img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 240px;
    object-fit: contain;
}

/* Compact card content */
body.parenting-page .book-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;

    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0.75rem 1.4rem 1.25rem;
}

body.parenting-page .book-info {
    display: grid;
    grid-template-rows: 72px 48px auto;
    row-gap: 0.35rem;

    width: 100%;
    height: auto;
    min-height: 0;
}

/* Consistent title area */
body.parenting-page .book-card-title {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 0;
    margin: 0;

    font-size: clamp(1.65rem, 2.1vw, 2rem);
    line-height: 1.12;
    font-weight: 700;
}

/* Consistent subtitle area */
body.parenting-page .book-card-subtitle {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    min-height: 0;
    margin: 0;

    font-size: 0.93rem;
    line-height: 1.35;
}

/* Description follows naturally */
body.parenting-page .book-card-description {
    min-height: 0;
    margin: 0.35rem 0 0;

    font-size: 0.96rem;
    line-height: 1.45;
}

/* Keep both controls together */
body.parenting-page .book-card-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;

    width: 100%;
    margin-top: 1.25rem;
}

body.parenting-page .favorite-btn {
    width: 78%;
    max-width: 220px;
    margin: 0;
}

body.parenting-page .purchase-btn {
    margin: 0;
}

/* Tablet */
@media (max-width: 991px) {
    body.parenting-page .book-cover-link {
        height: 280px;
    }

    body.parenting-page .book-info {
        grid-template-rows: auto auto auto;
    }
}

/* Mobile */
@media (max-width: 576px) {
    body.parenting-page .book-cover-link {
        height: 265px;
        padding-top: 2.2rem;
    }

    body.parenting-page .book-card-body {
        padding: 0.75rem 1rem 1.1rem;
    }

    body.parenting-page .book-card-title {
        font-size: 1.65rem;
    }

    body.parenting-page .favorite-btn {
        width: 85%;
    }
}

/* PARENTING BOOKS COMPACT POLISH END */

/* =========================================================
   LITTLE HERO COLLECTION HERO
========================================================= */

.collection-hero {
    position: relative;
    overflow: hidden;
    padding: 5.5rem 0 !important;
    background:
        radial-gradient(circle at top right, rgba(189, 54, 64, 0.08), transparent 34%),
        linear-gradient(135deg, #fffdf9 0%, #fff7f1 52%, #f7fbff 100%);
    border-bottom: 1px solid rgba(18, 59, 99, 0.08);
}

.collection-hero::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    left: -140px;
    bottom: -150px;
    border-radius: 50%;
    background: rgba(18, 59, 99, 0.04);
    pointer-events: none;
}

.collection-hero::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -90px;
    top: -100px;
    border-radius: 50%;
    background: rgba(189, 54, 64, 0.05);
    pointer-events: none;
}

.collection-hero .container {
    position: relative;
    z-index: 1;
}

.collection-title {
    max-width: 720px;
    margin-bottom: 0;
    color: #123b63;
    font-size: clamp(3rem, 6vw, 5.6rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.collection-description {
    max-width: 680px;
    margin-bottom: 0;
    color: #586575;
    font-size: 1.18rem;
    line-height: 1.75;
}

.collection-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.collection-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0.8rem 1.5rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.collection-buttons .btn:hover {
    transform: translateY(-2px);
}

.hero-btn-primary {
    border: 1px solid #bd3640;
    background: #bd3640;
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(189, 54, 64, 0.2);
}

.hero-btn-primary:hover,
.hero-btn-primary:focus {
    border-color: #a82e38;
    background: #a82e38;
    color: #ffffff;
}

.hero-btn-secondary {
    border: 1px solid rgba(18, 59, 99, 0.3);
    background: rgba(255, 255, 255, 0.78);
    color: #123b63;
}

.hero-btn-secondary:hover,
.hero-btn-secondary:focus {
    border-color: #123b63;
    background: #123b63;
    color: #ffffff;
}

.collection-highlights {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1.35rem;
    margin-top: 2rem;
}

.highlight-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    color: #334155;
    font-size: 1rem;
    font-weight: 600;

    white-space: nowrap;
}

.highlight-item i {
    color: var(--lh-red);
    font-size: 1.1rem;
}

.featured-book-display {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: min(100%, 390px);
    padding: 2rem;
    border: 1px solid rgba(18, 59, 99, 0.1);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 28px 65px rgba(18, 59, 99, 0.13);
    backdrop-filter: blur(8px);
}

.featured-book-display::before {
    content: "";
    position: absolute;
    inset: 18% 10% 8%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(189, 54, 64, 0.12), transparent 68%);
    filter: blur(12px);
}

.featured-book-display img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 390px;
    object-fit: contain;
    filter: drop-shadow(0 22px 20px rgba(17, 24, 39, 0.22));
}

.featured-label {
    margin-top: 1.25rem;
}

.featured-label .books-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.4rem 1rem;
    margin: 0;
    border-radius: 999px;
    background: rgba(189, 54, 64, 0.1);
    color: #bd3640;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

#book-collection {
    scroll-margin-top: 110px;
}

/* Tablet */
@media (max-width: 1199px) {
    .collection-hero {
        padding: 4.5rem 0 1.5rem !important;
        text-align: center;
    }

    .collection-title,
    .collection-description {
        margin-left: auto;
        margin-right: auto;
    }

    .collection-buttons,
    .collection-highlights {
        justify-content: center;
    }

    .featured-book-display {
        margin-top: 1rem;
    }

    .collection-hero .row {
        flex-direction: column;
    }

    .collection-hero .col-lg-7,
    .collection-hero .col-lg-5 {
        width: 100%;
        max-width: 100%;
    }

}

/* Mobile */
@media (max-width: 576px) {
    .collection-hero {
        padding: 3.5rem 0 !important;
    }

    .collection-title {
        font-size: 3rem;
        line-height: 1.02;
    }

    .collection-description {
        font-size: 1rem;
        line-height: 1.65;
    }

    .collection-buttons {
        flex-direction: column;
    }

    .collection-buttons .btn {
        width: 100%;
        max-width: 320px;
    }

    .collection-highlights {
        flex-direction: column;
        align-items: center;
        gap: 0.85rem;
    }

    .featured-book-display {
        width: 100%;
        padding: 1.4rem;
        border-radius: 22px;
    }

    .featured-book-display img {
        height: 310px;
    }
}

/* =========================================================
   LITTLE HERO CLEAN COLLECTION BACKGROUND
========================================================= */

body.parenting-page {

    background:
        radial-gradient(circle at top right,
            rgba(189, 54, 64, .05),
            transparent 35%),

        radial-gradient(circle at bottom left,
            rgba(18, 59, 99, .04),
            transparent 40%),

        linear-gradient(180deg,
            #fffdfb 0%,
            #fff9f4 100%);

    background-image: none !important;
}

/* Remove decorative leaf graphics */

body.parenting-page::before,
body.parenting-page::after,

.parenting-page .books-grid::before,
.parenting-page .books-grid::after,

.parenting-page .books-intro::before,
.parenting-page .books-intro::after {

    display: none !important;
    content: none !important;

}

/* PUG FU COMPACT CARDS START */
/* ==========================================
   PUG FU BOOKS COMPACT CARD LAYOUT
========================================== */

body.pug-fu-page .books-page {
    padding: 2.5rem 0 !important;
}

body.pug-fu-page .book-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

body.pug-fu-page .book-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem 1.25rem;
    overflow: hidden;

    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(11, 79, 108, 0.12);
    border-radius: 20px;

    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

body.pug-fu-page .book-card:hover {
    transform: translateY(-6px);
    border-color: rgba(189, 54, 64, 0.22);
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.13);
}

body.pug-fu-page .book-card>a:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 245px;
    margin-bottom: 1rem;
}

body.pug-fu-page .book-card>a:first-child img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 245px;
    object-fit: contain;
    margin: 0 auto;

    transition: transform 0.3s ease;
}

body.pug-fu-page .book-card:hover>a:first-child img {
    transform: scale(1.025);
}

body.pug-fu-page .book-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

body.pug-fu-page .book-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
}

body.pug-fu-page .book-info h3 {
    min-height: 3.4rem;
    margin: 0 0 0.75rem;

    color: #0b4f6c;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.25;
}

body.pug-fu-page .book-info h3 span {
    display: inline-block;
    margin-top: 0.25rem;

    color: #5b667a !important;
    font-size: 0.92rem !important;
    font-weight: 700;
    line-height: 1.25;
}

body.pug-fu-page .book-info p {
    margin: 0 0 0.55rem;

    color: #5b667a;
    font-size: 0.91rem;
    line-height: 1.5;
}

body.pug-fu-page .favorite-btn {
    margin-top: 1rem;
}

body.pug-fu-page .purchase-btn {
    margin-top: 0.9rem;

    background: linear-gradient(135deg,
            var(--lh-red),
            var(--lh-red-dark));

    box-shadow: 0 8px 20px rgba(189, 54, 64, 0.22);
}

body.pug-fu-page .purchase-btn:hover {
    background: linear-gradient(135deg,
            var(--lh-red-dark),
            #8f252e);

    box-shadow: 0 12px 24px rgba(189, 54, 64, 0.3);
}

@media (max-width: 1199px) {
    body.pug-fu-page .book-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    body.pug-fu-page .book-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    body.pug-fu-page .books-page {
        padding: 1.5rem 0 !important;
    }

    body.pug-fu-page .book-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    body.pug-fu-page .book-card {
        max-width: 390px;
        margin: 0 auto;
        padding: 1.35rem 1.15rem;
    }

    body.pug-fu-page .book-card>a:first-child {
        min-height: 225px;
    }

    body.pug-fu-page .book-card>a:first-child img {
        height: 225px;
    }

    body.pug-fu-page .book-info h3 {
        min-height: auto;
    }
}

/* PUG FU COMPACT CARDS END */
/* PUG FU MODERN PAGE START */
/* =========================================================
   PUG FU BOOKS  MODERN COLLECTION PAGE
========================================================= */

body.pug-fu-page {
    background: #fffaf6;
}

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

.pug-fu-modern-hero {
    position: relative;
    overflow: hidden;

    padding: clamp(1.5rem, 3vw, 2.5rem) 0 0;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #fdfefe 45%,
            #fafbfd 75%,
            #f7f9fc 100%);

    border-bottom: none;
}

.pug-fu-modern-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(circle at 50% 15%,
            rgba(255, 255, 255, .65) 0%,
            transparent 60%);

    opacity: .9;
}

.pug-fu-modern-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.pug-fu-modern-hero-copy {
    position: relative;
    z-index: 2;
}

.pug-fu-modern-hero-copy h1 {
    max-width: 760px;
    margin: .35rem 0 .75rem;
    color: #17324d;
    font-size: clamp(2.5rem, 5.6vw, 5rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.pug-fu-modern-hero-copy>p {
    max-width: 690px;
    margin: 0;
    color: #5b667a;
    font-size: clamp(1rem, 1.7vw, 1.2rem);
    line-height: 1.75;
}

.pug-fu-modern-hero-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 1.75rem;
}

.pug-fu-primary-cta,
.pug-fu-secondary-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 50px;
    padding: 0.8rem 1.2rem;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.pug-fu-primary-cta {
    color: #ffffff;
    background: linear-gradient(135deg,
            var(--lh-red, #bd3640),
            var(--lh-red-dark, #a62d37));
    box-shadow: 0 14px 28px rgba(189, 54, 64, 0.24);
}

.pug-fu-primary-cta:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(189, 54, 64, 0.31);
}

.pug-fu-secondary-cta {
    color: #0b6f8c;
    background: #ffffff;
    border: 1px solid rgba(11, 111, 140, 0.18);
}

.pug-fu-secondary-cta:hover {
    color: #085a72;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
}

.pug-fu-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.35rem;
    margin-top: 1.6rem;
    color: #596579;
    font-size: 0.93rem;
    font-weight: 700;
}

.pug-fu-hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.pug-fu-hero-trust i {
    color: var(--lh-red, #bd3640);
}

.pug-fu-modern-hero-art {
    position: relative;

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

    min-height: 320px;

    overflow: visible;

    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.pug-fu-modern-hero-art::after {
    content: none;
}

.pug-fu-modern-hero-art img {
    display: block;

    width: min(100%, 480px);
    height: auto;
    min-height: 0;

    object-fit: contain;

    background: transparent;

    transform: translateY(-12px);

    filter: drop-shadow(0 24px 30px rgba(189, 54, 64, 0.18));
}

/* =========================================================
   COLLECTION INTRODUCTION
========================================================= */

.pug-fu-collection-intro {
    padding: clamp(3.5rem, 7vw, 6rem) 0 2rem;
}

.pug-fu-collection-intro h2 {
    max-width: 900px;
    margin: 1rem auto;
    color: #17324d;
    font-size: clamp(2rem, 4vw, 3.35rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.pug-fu-collection-intro p {
    max-width: 780px;
    margin: 0 auto;
    color: #667085;
    font-size: 1.05rem;
    line-height: 1.75;
}

/* =========================================================
   BOOK GRID
========================================================= */

.pug-fu-modern-collection {
    padding: 2rem 0 clamp(4rem, 8vw, 7rem);
}

.pug-fu-modern-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
    align-items: stretch;
}

/* =========================================================
   BOOK CARD
========================================================= */

.pug-fu-modern-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(23, 50, 77, 0.10);
    border-radius: 24px;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}

.pug-fu-modern-card:hover {
    transform: translateY(-7px);
    border-color: rgba(189, 54, 64, 0.20);
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.13);
}

/* =========================================================
   BOOK COVER
========================================================= */

.pug-fu-book-cover {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 355px;

    padding: 1.5rem;

    overflow: hidden;

    background:
        radial-gradient(circle at 50% 25%,
            rgba(255, 209, 102, 0.23),
            transparent 38%),
        linear-gradient(180deg,
            #fffdf9 0%,
            #fff8f1 100%);
}

.book-card.pug-fu-modern-card .pug-fu-book-cover img {
    display: block;

    width: auto;
    max-width: 100%;
    height: 260px;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    object-fit: contain;

    filter: drop-shadow(0 16px 18px rgba(15, 23, 42, 0.17));

    transition: transform 0.28s ease;
}

.pug-fu-modern-card:hover .pug-fu-book-cover img {
    transform: translateY(-3px) scale(1.025);
}

/* =========================================================
   BOOK INFORMATION
========================================================= */

.pug-fu-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.45rem 1.45rem 1.5rem;
}

.pug-fu-card-label {
    display: inline-flex;

    align-self: center;

    margin: 0 auto 1rem;

    padding: 0.45rem 0.90rem;

    color: #a62d37;
    background: #f9e7e8;

    border-radius: 999px;

    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;

    box-shadow: 0 3px 8px rgba(189, 54, 64, 0.08);
}

.pug-fu-card-content h3 {
    margin: 0 0 0.7rem;
    color: #123d56;
    font-size: 1.22rem;
    font-weight: 900;
    line-height: 1.28;
    text-align: center;
}

.pug-fu-card-content p {
    margin: 0;
    color: #667085;
    font-size: 0.96rem;
    line-height: 1.65;
}

/* =========================================================
   CARD BUTTONS
========================================================= */
.pug-fu-card-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.8rem;
    align-items: center;

    margin-top: auto;
    padding-top: 1.35rem;
}

.pug-fu-modern-card .favorite-btn {
    width: 100%;
    min-height: 44px;
    margin: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;

    padding: 0.7rem 1rem;
    border-radius: 999px;
}

.pug-fu-modern-card .purchase-btn {

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    gap: .45rem;

    width: fit-content;

    min-height: 44px;

    margin: 0 !important;

    padding: .7rem 1rem;

    color: #fff !important;

    text-decoration: none;

    border-radius: 999px;

    background: linear-gradient(135deg,
            var(--lh-red, #bd3640),
            var(--lh-red-dark, #a62d37));

    box-shadow: 0 9px 20px rgba(189, 54, 64, .21);

}

.pug-fu-modern-card .purchase-btn:hover {
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(189, 54, 64, 0.28);
}

/* =========================================================
   COMING SOON CARD
========================================================= */

.pug-fu-coming-soon-card {
    border-style: dashed;
}

.pug-fu-coming-soon-card .pug-fu-book-cover img {
    opacity: 0.82;
}

.pug-fu-coming-soon-card .purchase-btn.disabled {
    cursor: default;
    opacity: 0.68;
    box-shadow: none;
}

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

@media (max-width: 1199px) {
    .pug-fu-modern-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .pug-fu-modern-hero-grid {
        grid-template-columns: 1fr;
    }

    .pug-fu-modern-hero-art,
    .pug-fu-modern-hero-art img {
        min-height: 360px;
    }
}

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

@media (max-width: 767px) {
    .pug-fu-modern-hero {
        padding: 3.4rem 0;
    }

    .pug-fu-modern-hero-copy {
        text-align: center;
    }

    .pug-fu-modern-hero-copy>p {
        margin-inline: auto;
    }

    .pug-fu-modern-hero-actions,
    .pug-fu-hero-trust {
        justify-content: center;
    }

    .pug-fu-modern-hero-art,
    .pug-fu-modern-hero-art img {
        min-height: 300px;
    }

    .pug-fu-modern-hero-art {
        border-radius: 24px;
    }

    .pug-fu-modern-grid {
        grid-template-columns: 1fr;
    }

    .pug-fu-modern-card {
        width: 100%;
        max-width: 520px;
        margin-inline: auto;
    }
}

@media (max-width: 480px) {
    .pug-fu-modern-hero-actions {
        flex-direction: column;
    }

    .pug-fu-primary-cta,
    .pug-fu-secondary-cta {
        width: 100%;
    }

    .pug-fu-hero-trust {
        flex-direction: column;
        align-items: center;
    }

    .pug-fu-book-cover {
        min-height: 285px;
    }

    .pug-fu-book-cover img {
        height: 225px;
    }

    .pug-fu-card-actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .pug-fu-modern-card .favorite-btn {
        flex: 1;
        width: auto;
        justify-content: center;
    }

    .pug-fu-modern-card .purchase-btn {
        flex: 0 0 auto;
        width: auto;
        justify-content: center;
    }
}

/* PUG FU MODERN PAGE END */
/* PUG FU CARD ALIGNMENT FIX */
.pug-fu-card-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
    margin-top: auto;
    padding-top: 1.35rem;
}

.pug-fu-modern-card .favorite-btn {
    width: 75%;
    min-height: 44px;
    margin: 0;
    justify-content: center;
}

.pug-fu-modern-card .purchase-btn {
    width: auto;
    min-width: 128px;
    min-height: 44px;
    margin: 0 !important;
    justify-content: center;
}

@media (max-width: 480px) {
    .pug-fu-card-actions {
        flex-direction: column;
        align-items: center;
    }

    .pug-fu-modern-card .favorite-btn {
        width: 82%;
    }

    .pug-fu-modern-card .purchase-btn {
        width: auto;
        min-width: 128px;
    }
}

/* =========================================================
   PUG FU COLLECTION TITLE
========================================================= */

.pug-fu-collection-title {
    padding: 2.5rem 0 1.5rem;
}

.pug-fu-collection-title h2 {
    margin: 0;
    color: #17324d;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -0.02em;
}

/* END PUG FU CARD ALIGNMENT FIX */
/* PUG FU COLLECTION TRUST DIVIDER START */
.pug-fu-collection-trust {
    position: relative;
    z-index: 2;

    padding: 1.35rem 0 1.1rem;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #fdfefe 45%,
            #fafbfd 75%,
            #f7f9fc 100%);

    border-top: none;
    border-bottom: 1px solid rgba(189, 54, 64, 0.08);
}

.pug-fu-collection-trust-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;

    gap: 3rem;

    text-align: center;
}

.pug-fu-collection-trust-row span {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: .55rem;

    min-width: 180px;

    color: #405269;

    font-size: .95rem;
    font-weight: 700;
}

.pug-fu-collection-trust-row i {

    width: 64px;
    height: 64px;

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

    color: #fff;

    font-size: 1.4rem;

    border-radius: 50%;

    background:
        linear-gradient(to bottom,
            #ef6b76 0%,
            #d84c58 45%,
            #bd3640 100%);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .35),
        0 10px 20px rgba(189, 54, 64, .28);
}

.pug-fu-modern-collection {
    padding-top: 1.75rem;
}

@media (max-width: 767px) {
    .pug-fu-collection-trust-row {
        gap: 0.75rem;
    }

    .pug-fu-collection-trust-row span {
        padding: 0.6rem 0.9rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 520px) {

    .pug-fu-collection-trust {
        padding: 1.25rem 0 1rem;
    }

    .pug-fu-collection-trust-row {
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 100%;
        gap: 1.35rem;

        margin: 0 auto;
        text-align: center;
    }

    .pug-fu-collection-trust-row span {
        width: 100%;
        max-width: 280px;
        min-width: 0;

        margin: 0 auto;
        padding: 0;

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

        text-align: center;
    }

    .pug-fu-collection-trust-row i {
        margin: 0 auto;
    }

    .pug-fu-collection-trust::after {
        width: calc(100% - 2rem);
    }
}







/* PUG FU COLLECTION TRUST DIVIDER END */
/* PUG FU SHARED HERO BACKGROUND START */

.pug-fu-hero-shell {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(circle at top right,
            rgba(189, 54, 64, 0.08),
            transparent 34%),
        linear-gradient(135deg,
            #fffdf9 0%,
            #fff7f1 52%,
            #f7fbff 100%);
}

/* Large soft blue circle bottom left */
.pug-fu-hero-shell::before {
    content: "";
    position: absolute;

    width: 320px;
    height: 320px;

    left: -140px;
    bottom: -150px;

    border-radius: 50%;
    background: rgba(18, 59, 99, 0.04);

    pointer-events: none;
    z-index: 0;
}

/* Large soft red circle top right */
.pug-fu-hero-shell::after {
    content: "";
    position: absolute;

    width: 260px;
    height: 260px;

    right: -90px;
    top: -100px;

    border-radius: 50%;
    background: rgba(189, 54, 64, 0.05);

    pointer-events: none;
    z-index: 0;
}

.pug-fu-hero-shell>section {
    position: relative;
    z-index: 1;
}

.pug-fu-modern-hero {
    background: transparent !important;
    border-bottom: 0 !important;
}

.pug-fu-modern-hero::before {
    content: none !important;
    display: none !important;
}

.pug-fu-collection-trust {
    background: transparent !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(189, 54, 64, 0.08);
}

.pug-fu-collection-trust::before,
.pug-fu-collection-trust::after {
    content: none !important;
    display: none !important;
}

/* PUG FU SHARED HERO BACKGROUND END */
/* PUG FU COLLECTION DIVIDER START */

.pug-fu-collection-trust .pug-fu-divider {
    width: min(820px, calc(100% - 40px));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 14px auto 0;
    padding: 0 0 4px;
}

.pug-fu-collection-trust .pug-fu-divider-line {
    flex: 1;
    min-width: 0;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(189, 54, 64, 0.22) 18%,
            rgba(189, 54, 64, 0.68) 100%);
}

.pug-fu-collection-trust .pug-fu-divider-line:last-child {
    background: linear-gradient(90deg,
            rgba(189, 54, 64, 0.68) 0%,
            rgba(189, 54, 64, 0.22) 82%,
            transparent 100%);
}

.pug-fu-collection-trust .pug-fu-divider-paw {
    display: block;
    flex: 0 0 auto;
    color: var(--lh-red, #bd3640);
    font-size: 16px;
    line-height: 1;
    transform: translateY(-1px);
}

@media (max-width: 576px) {
    .pug-fu-collection-trust .pug-fu-divider {
        width: calc(100% - 32px);
        gap: 12px;
        margin-top: 12px;
    }

    .pug-fu-collection-trust .pug-fu-divider-paw {
        font-size: 8px;
    }
}

/* PUG FU COLLECTION DIVIDER END */
/* PUG FU GLOSSY PURCHASE BUTTONS START */

.pug-fu-modern-card .purchase-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    color: #ffffff !important;

    background:
        linear-gradient(180deg,
            #e04c59 0%,
            #c93441 52%,
            #b72230 100%) !important;

    border: 1px solid rgba(153, 24, 37, 0.18);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.28),
        inset 0 -2px 0 rgba(119, 15, 28, 0.12),
        0 10px 22px rgba(189, 54, 64, 0.28) !important;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}

.pug-fu-modern-card .purchase-btn::before {
    content: "";

    position: absolute;
    z-index: -1;

    left: 10%;
    right: 10%;
    top: 3px;

    height: 42%;

    border-radius: 999px;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.42),
            rgba(255, 255, 255, 0.08));

    pointer-events: none;
}

.pug-fu-modern-card .purchase-btn:hover {
    color: #ffffff !important;

    background:
        linear-gradient(180deg,
            #e95a66 0%,
            #cf3543 52%,
            #ad1f2c 100%) !important;

    transform: translateY(-2px);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.34),
        inset 0 -2px 0 rgba(119, 15, 28, 0.14),
        0 14px 28px rgba(189, 54, 64, 0.36) !important;
}

.pug-fu-modern-card .purchase-btn:active {
    transform: translateY(0);

    box-shadow:
        inset 0 2px 5px rgba(110, 12, 24, 0.20),
        0 6px 14px rgba(189, 54, 64, 0.24) !important;
}

/* PUG FU GLOSSY PURCHASE BUTTONS END */
/* =========================================================
   START OF AMARU PAGE CSS
========================================================= */


/* =========================================================
   AMARU PAGE BASE
========================================================= */

body.amaru-page {
    background: #ffffff;
}

.amaru-books-section {
    position: relative;
    padding-top: 3.5rem !important;
    padding-bottom: 5rem !important;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #fffaf4 100%);
}

/* =========================================================
   AMARU HERO SHELL
========================================================= */

.amaru-hero-shell {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(circle at 12% 20%,
            rgba(255, 214, 153, 0.35),
            transparent 28%),
        radial-gradient(circle at 88% 18%,
            rgba(110, 193, 181, 0.22),
            transparent 30%),
        linear-gradient(135deg,
            #fff8ed 0%,
            #fffdf8 48%,
            #edf9f6 100%);
}

/* Decorative tropical circles */

.amaru-hero-shell::before,
.amaru-hero-shell::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.amaru-hero-shell::before {
    width: 260px;
    height: 260px;

    top: -110px;
    left: -85px;

    background:
        rgba(255, 184, 92, 0.14);
}

.amaru-hero-shell::after {
    width: 320px;
    height: 320px;

    right: -130px;
    bottom: -180px;

    background:
        rgba(45, 148, 138, 0.11);
}

/* =========================================================
   AMARU MODERN HERO
========================================================= */

.amaru-modern-hero {
    position: relative;
    z-index: 1;

    padding: clamp(1.5rem, 3vw, 2.5rem) 0 0;
}

.amaru-modern-hero-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr) minmax(380px, 1.05fr);

    align-items: center;

    gap: 3.5rem;
}

/* =========================================================
   AMARU HERO COPY
========================================================= */

.amaru-modern-hero-copy {
    max-width: 620px;
}

.amaru-eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: 1rem;
    padding: 0.48rem 0.9rem;

    color: #123f59;

    background:
        linear-gradient(180deg,
            #eef7fb 0%,
            #dceef8 100%);

    border:
        1px solid rgba(18, 63, 89, 0.10);

    border-radius: 999px;

    box-shadow:
        0 6px 14px rgba(18, 63, 89, 0.12);

    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    line-height: 1.2;
}

.amaru-modern-hero-copy h1 {
    margin: 0 0 1rem;

    color: #123f59;

    font-size: clamp(2.65rem, 5vw, 4.6rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.amaru-modern-hero-copy p {
    max-width: 570px;

    margin: 0 0 1.65rem;

    color: #596579;

    font-size: 1.08rem;
    line-height: 1.75;
}

/* =========================================================
   AMARU HERO BUTTON
========================================================= */

.amaru-hero-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;

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

    min-height: 48px;

    padding: 0.8rem 1.35rem;

    color: #ffffff !important;
    text-decoration: none !important;

    background:
        linear-gradient(180deg,
            #df6254 0%,
            #c7483d 52%,
            #ad352d 100%);

    border:
        1px solid rgba(136, 38, 32, 0.20);

    border-radius: 999px;

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.30),
        inset 0 -2px 0 rgba(102, 24, 20, 0.14),
        0 12px 26px rgba(173, 53, 45, 0.28);

    font-weight: 800;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.amaru-hero-button::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 3px;
    left: 10%;
    right: 10%;

    height: 42%;

    border-radius: 999px;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.44),
            rgba(255, 255, 255, 0.08));
}

.amaru-hero-button:hover {
    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.34),
        inset 0 -2px 0 rgba(102, 24, 20, 0.14),
        0 16px 30px rgba(173, 53, 45, 0.35);
}

/* =========================================================
   AMARU HERO ART
========================================================= */

.amaru-modern-hero-art {
    position: relative;

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

    min-width: 0;
}

.amaru-modern-hero-art::before {
    content: "";

    position: absolute;

    width: 88%;
    height: 86%;

    border-radius: 34px;

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.68),
            rgba(255, 255, 255, 0.28));

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

    box-shadow:
        0 24px 50px rgba(15, 23, 42, 0.12);

    transform: rotate(2deg);
}

/* =========================================================
   AMARU HERO BACKGROUND
========================================================= */

.amaru-hero-background {
    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    max-width: 610px;
    height: 410px;

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

    border-radius: 28px;

    box-shadow:
        0 22px 46px rgba(15, 23, 42, 0.18);

    transition:
        transform 0.3s ease;
}

.amaru-modern-hero-art:hover .amaru-hero-background {
    transform:
        translateY(-4px) scale(1.01);
}

/* =========================================================
   AMARU SERIES EMBLEM
========================================================= */

.amaru-series-emblem {
    position: absolute;

    /* Move slightly outside the artwork */
    top: -18px;
    left: -18px;

    /* Larger */
    width: 140px;
    height: 140px;

    z-index: 20;

    pointer-events: none;

    filter: drop-shadow(0 8px 18px rgba(15, 23, 42, 0.18));
}

/* =========================================================
   AMARU TRUST ROW
========================================================= */

.amaru-collection-trust {
    position: relative;
    z-index: 1;

    min-height: 34px;
}

/* =========================================================
   AMARU BOOK GRID
========================================================= */

.amaru-modern-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1.75rem;
    align-items: stretch;

    width: 100%;
    margin: 0 auto;
}

/* =========================================================
   AMARU CARD SHELL
========================================================= */

.amaru-modern-card {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;
    height: 100%;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.98);

    border:
        1px solid rgba(23, 50, 77, 0.10);

    border-radius: 24px;

    box-shadow:
        0 16px 42px rgba(15, 23, 42, 0.09);

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}

.amaru-modern-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(189, 54, 64, 0.22);

    box-shadow:
        0 24px 54px rgba(15, 23, 42, 0.14);
}

/* =========================================================
   AMARU BOOK COVER STAGE
========================================================= */

.amaru-book-cover {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 355px;

    padding: 1.5rem;

    overflow: hidden;

    text-decoration: none;

    background:
        radial-gradient(circle at 50% 24%,
            rgba(255, 196, 110, 0.28),
            transparent 40%),
        linear-gradient(180deg,
            #fffdf9 0%,
            #fff6eb 100%);
}

.amaru-modern-card .amaru-book-cover img {
    display: block;

    width: auto;
    max-width: 100%;
    height: 270px;

    padding: 0 !important;
    margin: 0 !important;

    object-fit: contain;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    filter:
        drop-shadow(0 16px 18px rgba(15, 23, 42, 0.18));

    transition:
        transform 0.28s ease,
        opacity 0.28s ease;
}

.amaru-modern-card:hover .amaru-book-cover img {
    transform:
        translateY(-3px) scale(1.025);
}

/* =========================================================
   AMARU CARD CONTENT
========================================================= */

.amaru-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;

    width: 100%;

    padding: 1.45rem 1.45rem 1.55rem;
}

/* =========================================================
   AMARU CATEGORY LABEL
========================================================= */
.amaru-card-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;

    width: fit-content;
    min-height: 38px;

    margin: 0 auto 0.9rem;
    padding: 0.45rem 1rem;

    color: #ad3340;

    background:
        linear-gradient(180deg,
            #fff1f3 0%,
            #fbe4e8 100%);

    border: 1px solid rgba(189, 54, 64, 0.08);
    border-radius: 999px;

    box-shadow:
        0 6px 14px rgba(189, 54, 64, 0.10);

    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

/* =========================================================
   AMARU CARD TITLE
========================================================= */

.amaru-card-content h3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    min-height: 58px;

    margin: 0 0 0.7rem;

    color: #123f59;

    font-size: 1.18rem;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
}

.amaru-card-subtitle {
    display: block;

    margin-top: 0.3rem;

    color: #667085;

    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

/* =========================================================
   AMARU DESCRIPTION
========================================================= */

.amaru-card-content>p {
    margin: 0;

    color: #667085;

    font-size: 0.97rem;
    line-height: 1.68;
    text-align: center;
}

/* =========================================================
   AMARU COMPACT CONTENT ALIGNMENT
========================================================= */

.amaru-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;

    width: 100%;

    padding: 1.15rem 1.45rem 1.55rem;
}

.amaru-card-content>p {
    width: 100%;
    min-height: 88px;

    margin: 0;

    color: #667085;

    font-size: 0.97rem;
    line-height: 1.65;
    text-align: center;
}

/* =========================================================
   AMARU CARD ACTIONS
========================================================= */
.amaru-card-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    gap: 0.75rem;

    width: 100%;

    margin-top: auto;
    padding-top: 1.35rem;
}

/* =========================================================
   AMARU FAVORITE BUTTON
   Keep original color with scale-only hover
========================================================= */

.amaru-modern-card .favorite-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    gap: 0.45rem;

    width: 75%;
    min-height: 44px;

    margin: 0 !important;
    padding: 0.7rem 1rem;

    color: #1382a8 !important;

    background: #ffffff !important;

    border: 1px solid rgba(19, 130, 168, 0.24) !important;
    border-radius: 999px !important;

    box-shadow:
        0 5px 12px rgba(15, 23, 42, 0.04) !important;

    font-weight: 700;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.amaru-modern-card .favorite-btn i,
.amaru-modern-card .favorite-btn span {
    color: #1382a8 !important;
}

/* Scale only — no color change */
.amaru-modern-card .favorite-btn:hover,
.amaru-modern-card .favorite-btn:focus {
    color: #1382a8 !important;

    background: #ffffff !important;

    border-color: rgba(19, 130, 168, 0.24) !important;

    transform: scale(1.035);

    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

.amaru-modern-card .favorite-btn:hover i,
.amaru-modern-card .favorite-btn:hover span,
.amaru-modern-card .favorite-btn:focus i,
.amaru-modern-card .favorite-btn:focus span {
    color: #1382a8 !important;
}

/* =========================================================
   AMARU GLOSSY PURCHASE BUTTON
========================================================= */

.amaru-modern-card .purchase-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    gap: 0.45rem;

    width: auto;
    min-width: 132px;
    min-height: 44px;

    margin: 0 !important;
    padding: 0.7rem 1.05rem;

    color: #ffffff !important;
    text-decoration: none !important;

    border:
        1px solid rgba(136, 38, 32, 0.20) !important;

    border-radius: 999px !important;

    background:
        linear-gradient(180deg,
            #df6254 0%,
            #c7483d 52%,
            #ad352d 100%) !important;

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.30),
        inset 0 -2px 0 rgba(102, 24, 20, 0.14),
        0 10px 22px rgba(173, 53, 45, 0.28) !important;

    font-weight: 800;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}

.amaru-modern-card .purchase-btn::before {
    content: "";

    position: absolute;
    z-index: -1;

    left: 10%;
    right: 10%;
    top: 3px;

    height: 42%;

    border-radius: 999px;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.44),
            rgba(255, 255, 255, 0.08));

    pointer-events: none;
}

.amaru-modern-card .purchase-btn:hover {
    color: #ffffff !important;

    background:
        linear-gradient(180deg,
            #e86f61 0%,
            #cb493e 52%,
            #a82f28 100%) !important;

    transform: translateY(-2px);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.36),
        inset 0 -2px 0 rgba(102, 24, 20, 0.16),
        0 14px 28px rgba(173, 53, 45, 0.36) !important;
}

.amaru-modern-card .purchase-btn:active {
    transform: translateY(0);

    box-shadow:
        inset 0 2px 5px rgba(93, 20, 17, 0.22),
        0 6px 14px rgba(173, 53, 45, 0.24) !important;
}

/* =========================================================
   AMARU COMING SOON CARD
   Matches the Pug Fu Coming Soon design
========================================================= */

.amaru-coming-soon-card {
    border-style: solid;
}

.amaru-coming-soon-card .amaru-coming-soon-cover {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 355px;
    padding: 2.25rem;

    background:
        linear-gradient(180deg,
            #fff7d8 0%,
            #fffdf2 100%);
}

.amaru-coming-soon-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 220px;
    height: 285px;

    margin: 0 auto;
    gap: 1rem;

    border: 2px dashed rgba(18, 63, 89, .18);
    border-radius: 18px;

    background: rgba(255, 255, 255, .72);
}

.amaru-coming-soon-placeholder i {
    font-size: 3rem;
    color: #f0a43b;
    line-height: 1;
}

.amaru-coming-soon-placeholder span {
    font-size: 1.15rem;
    font-weight: 800;
    color: #123f59;
    text-align: center;
}

.amaru-coming-soon-card .amaru-card-content {
    align-items: center;
    text-align: center;
}

.amaru-coming-soon-card .amaru-card-content>p {
    min-height: 88px;
}

.amaru-coming-soon-card .purchase-btn.disabled {
    cursor: default;
    opacity: .82;
    pointer-events: none;
}

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

@media (max-width: 1199px) {

    .amaru-modern-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .amaru-modern-card {
        max-width: 520px;
    }
}

/* =========================================================
   AMARU SMALL TABLET
========================================================= */

@media (max-width: 767px) {

    .amaru-books-section {
        padding-top: 2.75rem !important;
        padding-bottom: 4rem !important;
    }

    .amaru-modern-grid {
        grid-template-columns: 1fr;

        gap: 1.4rem;
    }

    .amaru-modern-card {
        max-width: 430px;
        margin: 0 auto;
    }

    .amaru-book-cover {
        height: 325px;
    }

    .amaru-modern-card .amaru-book-cover img {
        height: 245px;
    }
}

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

@media (max-width: 480px) {

    .amaru-books-section {
        padding-top: 2.25rem !important;
        padding-bottom: 3.5rem !important;
    }

    .amaru-modern-grid {
        gap: 1.25rem;
    }

    .amaru-modern-card {
        border-radius: 20px;
    }

    .amaru-book-cover {
        height: 290px;
        padding: 1.2rem;
    }

    .amaru-modern-card .amaru-book-cover img {
        height: 220px;
    }

    .amaru-card-content {
        padding:
            1.25rem 1.1rem 1.35rem;
    }

    .amaru-card-content h3 {
        font-size: 1.18rem;
    }

    .amaru-card-content>p {
        font-size: 0.94rem;
        line-height: 1.6;
    }

    .amaru-modern-card .favorite-btn {
        width: 84%;
    }

    .amaru-modern-card .purchase-btn {
        min-width: 128px;
    }
}

/* =========================================================
   AMARU HERO FAVORITES BUTTON
========================================================= */

.amaru-modern-hero .favorite-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    gap: 0.45rem;

    width: auto !important;
    min-width: 190px;
    max-width: none !important;
    min-height: 48px;

    padding: 0.85rem 1.5rem !important;
    margin: 0 !important;

    color: #0b6f8f !important;
    background: #ffffff !important;

    border: 1px solid rgba(11, 111, 143, 0.24) !important;
    border-radius: 999px !important;

    box-shadow: none !important;

    font-weight: 800;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none !important;

    transform-origin: center;

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.amaru-modern-hero .favorite-btn span {
    font-weight: 800 !important;
    letter-spacing: -0.01em;
}

.amaru-modern-hero .favorite-btn i,
.amaru-modern-hero .favorite-btn span {
    color: #0b6f8f !important;
}

.amaru-modern-hero .favorite-btn:hover {
    background: #ffffff !important;
    color: #0b6f8f !important;

    border-color: rgba(11, 111, 143, 0.28) !important;

    transform: scale(1.04);

    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

.amaru-modern-hero .favorite-btn:hover i,
.amaru-modern-hero .favorite-btn:hover span {
    color: #0b6f8f !important;
}

/* =========================================================
   AMARU HERO RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .amaru-modern-hero {
        padding: 1.5rem 0 2.5rem;
    }

    .amaru-modern-hero-grid {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }

    .amaru-modern-hero-copy {
        max-width: 720px;

        margin: 0 auto;

        text-align: center;
    }

    .amaru-modern-hero-copy p {
        margin-left: auto;
        margin-right: auto;
    }

    .amaru-modern-hero-art {
        max-width: 700px;

        margin: 0 auto;
    }

    .amaru-modern-hero-art img {
        height: 380px;
    }
}

@media (max-width: 576px) {

    .amaru-modern-hero {
        padding: 2.9rem 0;
    }

    .amaru-modern-hero-grid {
        gap: 2rem;
    }

    .amaru-eyebrow {
        font-size: 0.78rem;
    }

    .amaru-modern-hero-copy h1 {
        font-size: clamp(2.35rem, 12vw, 3.35rem);
    }

    .amaru-modern-hero-copy p {
        font-size: 1rem;
        line-height: 1.65;
    }

    .amaru-modern-hero-art::before {
        width: 92%;
        height: 88%;
    }

    .amaru-modern-hero-art img {
        height: 285px;

        border-radius: 22px;
    }
}


/* AMARU LARGE HERO ICON FIX START */

/*
   The palm icon is the main Amaru hero artwork,
   matching the visual role of the large Pug Fu paw.
*/

.amaru-modern-hero-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 410px;
}

/* Remove the old decorative artwork panel */
.amaru-modern-hero-art::before {
    display: none !important;
    content: none !important;
}

/* Large standalone palm icon */
.amaru-modern-hero-art .amaru-hero-icon {
    position: relative !important;
    inset: auto !important;

    display: block !important;

    width: clamp(320px, 34vw, 460px) !important;
    max-width: 90% !important;
    height: auto !important;

    object-fit: contain !important;
    object-position: center !important;

    border-radius: 0 !important;
    box-shadow: none !important;

    filter:
        drop-shadow(0 22px 32px rgba(15, 23, 42, 0.18)) !important;

    transform: translateX(18px) !important;
    transition: none !important;

    z-index: 2;
}

/* No movement or animation */
.amaru-modern-hero-art:hover .amaru-hero-icon,
.amaru-modern-hero-art .amaru-hero-icon:hover {
    transform: translateX(18px) !important;
}

/* Tablet */
@media (max-width: 991px) {
    .amaru-modern-hero-art {
        min-height: 370px;
    }

    .amaru-modern-hero-art .amaru-hero-icon {
        width: clamp(280px, 48vw, 380px) !important;
        height: auto !important;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .amaru-modern-hero-art {
        min-height: 285px;
    }

    .amaru-modern-hero-art .amaru-hero-icon {
        width: min(290px, 82vw) !important;
        height: auto !important;
    }
}

/* AMARU LARGE HERO ICON FIX END */
/* =========================================================
   END OF AMARU PAGE CSS
========================================================= */

/* NAV FREE RESOURCES GLOSS START */

.header-dashboard-btn {
    position: relative !important;
    isolation: isolate;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;

    padding: 0.9rem 1.65rem;

    color: #ffffff !important;
    background:
        linear-gradient(180deg,
            #f16c78 0%,
            #df4b58 42%,
            #c52f3e 72%,
            #ad2230 100%) !important;

    border: 1px solid #b52d39 !important;
    border-radius: 18px;

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.42),
        inset 0 -2px 0 rgba(112, 18, 25, 0.20),
        0 12px 24px rgba(173, 51, 64, 0.28) !important;

    font-weight: 800;
    text-decoration: none !important;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.header-dashboard-btn::before {
    content: "";

    position: absolute;
    top: 3px;
    left: 9%;
    right: 9%;

    height: 42%;

    border-radius: 999px;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.58),
            rgba(255, 255, 255, 0));

    pointer-events: none;
}

.header-dashboard-btn:hover,
.header-dashboard-btn:focus {
    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.46),
        inset 0 -2px 0 rgba(112, 18, 25, 0.22),
        0 17px 30px rgba(173, 51, 64, 0.36) !important;
}

.header-dashboard-btn i,
.header-dashboard-btn span {
    position: relative;
    z-index: 2;
    color: #ffffff !important;
}



/* =========================================================
   START OF COLORING BOOKS PAGE CSS
========================================================= */
/* =========================================================
   COLORING PAGE BASE
========================================================= */

body.coloring-page {
    background:
        linear-gradient(180deg,
            #fffaf6 0%,
            #ffffff 44%,
            #fff8fb 100%);
}

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

.coloring-hero-shell {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(circle at 4% 10%,
            rgba(255, 215, 153, 0.48) 0%,
            rgba(255, 215, 153, 0.22) 11%,
            transparent 24%),
        radial-gradient(circle at 96% 96%,
            rgba(166, 220, 218, 0.38) 0%,
            rgba(166, 220, 218, 0.18) 14%,
            transparent 27%),
        linear-gradient(135deg,
            #fffaf2 0%,
            #fffdf9 52%,
            #eef9f8 100%);
}

.coloring-modern-hero {
    padding: clamp(1.5rem, 3vw, 2.5rem) 0 0;
}

.coloring-modern-hero-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr) minmax(380px, 1.05fr);

    align-items: center;
    gap: 3.5rem;
}

.coloring-modern-hero-copy {
    max-width: 620px;
}

.coloring-eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: 1rem;
    padding: 0.48rem 0.9rem;

    color: #bf3d58;

    background:
        linear-gradient(180deg,
            #fff1f5 0%,
            #fde4eb 100%);

    border: 1px solid rgba(191, 61, 88, 0.10);
    border-radius: 999px;

    box-shadow:
        0 6px 14px rgba(191, 61, 88, 0.10);

    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    line-height: 1.2;
    text-transform: uppercase;
}

.coloring-modern-hero-copy h1 {
    margin: 0 0 1rem;

    color: #123f59;

    font-size: clamp(2.75rem, 5vw, 4.7rem);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.coloring-modern-hero-copy p {
    max-width: 575px;
    margin: 0 0 1.65rem;

    color: #596579;

    font-size: 1.08rem;
    line-height: 1.75;
}

.coloring-modern-hero-copy .favorite-btn {
    width: auto;
    min-width: 190px;
    max-width: none;
    margin: 0;
}

/* =========================================================
   COLORING HERO ART
========================================================= */

.coloring-modern-hero-art {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
}

.coloring-hero-image {
    display: block;

    width: 100%;
    max-width: 610px;
    height: 410px;

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

    border-radius: 28px;

    box-shadow:
        0 22px 46px rgba(15, 23, 42, 0.18);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.coloring-modern-hero-art:hover .coloring-hero-image {
    transform:
        translateY(-4px) scale(1.01);

    box-shadow:
        0 28px 56px rgba(15, 23, 42, 0.22);
}

/* =========================================================
   COLORING BOOKS SECTION
========================================================= */

.coloring-books-section {
    padding: 5rem 0 5.5rem;
}

.coloring-section-heading {
    max-width: 720px;

    margin: 0 auto 2.75rem;

    text-align: center;
}

.coloring-section-label {
    display: inline-flex;

    margin-bottom: 0.9rem;
    padding: 0.45rem 0.85rem;

    color: #bf3d58;

    background: #fff0f4;

    border-radius: 999px;

    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.coloring-section-heading h2 {
    margin: 0 0 0.85rem;

    color: #123f59;

    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.035em;
}

.coloring-section-heading p {
    margin: 0;

    color: #667085;

    font-size: 1.05rem;
    line-height: 1.7;
}

/* =========================================================
   SINGLE CARD GRID
========================================================= */

.coloring-modern-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px, 390px));

    justify-content: center;

    gap: 2rem;

}

/* =========================================================
   PREMIUM COLORING CARD
========================================================= */

.coloring-modern-card {
    overflow: hidden;

    display: flex;
    flex-direction: column;

    min-height: 100%;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #fffdfd 100%);

    border:
        1px solid rgba(18, 63, 89, 0.09);

    border-radius: 26px;

    box-shadow:
        0 18px 38px rgba(15, 23, 42, 0.12);

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease;
}

.coloring-modern-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 26px 48px rgba(15, 23, 42, 0.17);
}

.coloring-book-cover {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 355px;
    padding: 2rem;

    background:
        linear-gradient(180deg,
            #fff7d8 0%,
            #fffdf2 100%);

    text-decoration: none;
}

.coloring-book-cover img {
    display: block;

    width: auto;
    max-width: 100%;
    height: 285px;

    object-fit: contain;

    filter:
        drop-shadow(0 16px 24px rgba(15, 23, 42, 0.16));

    transition:
        transform 0.28s ease;
}

.coloring-modern-card:hover .coloring-book-cover img {
    transform:
        translateY(-4px) scale(1.025);
}

.coloring-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;

    padding: 1.7rem 1.7rem 1.8rem;

    text-align: center;
}

.coloring-card-label {
    align-self: center;

    margin-bottom: 0.9rem;
    padding: 0.4rem 0.78rem;

    color: #bf3d58;

    background: #fff0f4;

    border-radius: 999px;

    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.coloring-card-content h3 {
    margin: 0 0 0.85rem;

    color: #123f59;

    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1.15;
}

.coloring-card-content h3 span {
    display: block;

    margin-top: 0.3rem;

    color: #667085;

    font-size: 0.95rem;
    font-weight: 700;
}

.coloring-card-content>p {
    margin: 0 0 1.4rem;

    color: #667085;

    font-size: 0.98rem;
    line-height: 1.65;
}

.coloring-card-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;

    margin-top: auto;
}

.coloring-modern-card .favorite-btn {
    width: 78%;
    min-height: 44px;
    margin: 0;
}

.coloring-modern-card .purchase-btn {
    min-width: 145px;
    margin: 0;
}

/* =========================================================
   COLORING HERO FAVORITES BUTTON
========================================================= */
.coloring-modern-hero .favorite-btn {
    width: auto !important;
    min-width: 182px;
    max-width: none !important;
    min-height: 48px;

    margin: 0;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;

    padding: 0.72rem 1.25rem !important;

    color: #0b6f8f !important;
    background: #ffffff !important;

    border: 1px solid rgba(11, 111, 143, 0.22) !important;
    border-radius: 999px !important;

    box-shadow:
        0 6px 14px rgba(15, 23, 42, 0.05);

    font-size: 0.95rem;
    font-weight: 800;

    transform: none !important;
}

.coloring-modern-hero .favorite-btn i {
    color: #0b6f8f !important;
    font-size: 0.95rem;
    font-weight: 400 !important;
}

.coloring-modern-hero .favorite-btn span {
    color: #0b6f8f !important;
    font-weight: 800;
}

.coloring-modern-hero .favorite-btn:hover,
.coloring-modern-hero .favorite-btn:focus {
    color: #0b6f8f !important;
    background: #ffffff !important;

    border-color: rgba(11, 111, 143, 0.30) !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.08);
}

/* =========================================================
   COMING SOON CARD
========================================================= */

.coming-soon-cover {

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

    background:
        linear-gradient(180deg,
            #fff7d8 0%,
            #fffdf2 100%);

}

.coming-soon-placeholder {

    width: 220px;
    height: 285px;

    border-radius: 18px;

    border: 2px dashed rgba(18, 63, 89, .18);

    background:
        rgba(255, 255, 255, .72);

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

    gap: 1rem;

}

.coming-soon-placeholder i {

    font-size: 3rem;

    color: #f0a43b;

}

.coming-soon-placeholder span {

    color: #123f59;

    font-size: 1.15rem;
    font-weight: 800;

}

.coming-soon-btn {

    cursor: default;

    opacity: .82;

    pointer-events: none;

}
















/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .coloring-modern-hero {
        padding: 3.4rem 0;
    }

    .coloring-modern-hero-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .coloring-modern-hero-copy {
        max-width: 720px;
        margin: 0 auto;

        text-align: center;
    }

    .coloring-modern-hero-copy p {
        margin-left: auto;
        margin-right: auto;
    }

    .coloring-modern-hero-art {
        max-width: 700px;
        margin: 0 auto;
    }

    .coloring-hero-image {
        height: 380px;
    }
}

@media (max-width: 576px) {

    .coloring-modern-hero {
        padding: 2.9rem 0;
    }

    .coloring-modern-hero-grid {
        gap: 2rem;
    }

    .coloring-modern-hero-copy h1 {
        font-size: clamp(2.35rem, 12vw, 3.35rem);
    }

    .coloring-modern-hero-copy p {
        font-size: 1rem;
        line-height: 1.65;
    }

    .coloring-hero-image {
        height: 285px;
        border-radius: 22px;
    }

    .coloring-books-section {
        padding: 4rem 0;
    }

    .coloring-modern-card .favorite-btn {
        width: 86%;
    }
}



/* =========================================================
   END OF COLORING BOOKS PAGE CSS
========================================================= */

/* COLORING HERO DECORATIVE CIRCLES START */

.coloring-hero-shell::before {
    content: "";

    position: absolute;
    z-index: 0;

    width: 260px;
    height: 260px;

    top: -125px;
    left: -105px;

    border-radius: 50%;

    background:
        rgba(255, 211, 147, 0.30);

    pointer-events: none;
}

.coloring-hero-shell::after {
    content: "";

    position: absolute;
    z-index: 0;

    width: 300px;
    height: 300px;

    right: -135px;
    bottom: -165px;

    border-radius: 50%;

    background:
        rgba(169, 222, 219, 0.28);

    pointer-events: none;
}

.coloring-modern-hero {
    position: relative;
    z-index: 1;
}

/* COLORING HERO DECORATIVE CIRCLES END */
/* =========================================================
   PUG FU COMING SOON CARD
========================================================= */

.pug-fu-coming-soon-card .pug-fu-coming-soon-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 365px;
    padding: 2.25rem;

    background:
        linear-gradient(180deg,
            #fff7d8 0%,
            #fffdf2 100%);
}

.pug-fu-coming-soon-placeholder {
    width: 220px;
    max-width: 100%;
    height: 285px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;

    border: 2px dashed rgba(18, 63, 89, 0.18);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.72);
}

.pug-fu-coming-soon-placeholder i {
    font-size: 3rem;
    color: #f0a43b;
}

.pug-fu-coming-soon-placeholder span {
    color: #123f59;
    font-size: 1.15rem;
    font-weight: 800;
    text-align: center;
}

@media (max-width: 576px) {

    .pug-fu-coming-soon-card .pug-fu-coming-soon-cover {
        min-height: 330px;
        padding: 1.5rem;
    }

    .pug-fu-coming-soon-placeholder {
        width: 205px;
        height: 265px;
    }

}

/* LITTLE HERO SHARED GLOSSY PURCHASE BUTTON START */

.purchase-btn.lh-glossy-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;

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

    color: #ffffff !important;
    text-decoration: none !important;

    background:
        linear-gradient(180deg,
            #e04c59 0%,
            #c93441 52%,
            #b72230 100%) !important;

    border: 1px solid rgba(153, 24, 37, 0.18);
    border-radius: 999px;

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.28),
        inset 0 -2px 0 rgba(119, 15, 28, 0.12),
        0 10px 22px rgba(189, 54, 64, 0.28) !important;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}

.purchase-btn.lh-glossy-btn::before {
    content: "";

    position: absolute;
    z-index: -1;

    left: 10%;
    right: 10%;
    top: 3px;

    height: 42%;

    border-radius: 999px;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.42),
            rgba(255, 255, 255, 0.08));

    pointer-events: none;
}

.purchase-btn.lh-glossy-btn:hover {
    color: #ffffff !important;
    text-decoration: none !important;

    background:
        linear-gradient(180deg,
            #e95a66 0%,
            #cf3543 52%,
            #ad1f2c 100%) !important;

    transform: translateY(-2px);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.34),
        inset 0 -2px 0 rgba(119, 15, 28, 0.14),
        0 14px 28px rgba(189, 54, 64, 0.36) !important;
}

.purchase-btn.lh-glossy-btn:active {
    transform: translateY(0);

    box-shadow:
        inset 0 2px 5px rgba(110, 12, 24, 0.20),
        0 6px 14px rgba(189, 54, 64, 0.24) !important;
}

/* LITTLE HERO SHARED GLOSSY PURCHASE BUTTON END */

/* ABOUT PAGE - ALLOW SHARED GLOSSY BUTTONS */

.about-page .purchase-btn.lh-glossy-btn {
    background:
        linear-gradient(180deg,
            #e04c59 0%,
            #c93441 52%,
            #b72230 100%) !important;

    background-image: none;
}

.about-page .purchase-btn.lh-glossy-btn:hover {
    background:
        linear-gradient(180deg,
            #e95a66 0%,
            #cf3543 52%,
            #ad1f2c 100%) !important;
}


/* PARENTING HERO TOP MARGIN FIX START */
.collection-hero .row>* {
    margin-top: 0 !important;
}

/* PARENTING HERO TOP MARGIN FIX END */




/* =========================================================
   TOOLKITS MODERN HERO START
   Modern homepage-inspired hero for the Toolkits page.
   Replaces the old full-width watercolor banner.
========================================================= */










/* ==========================================================
   BUTTON ICON ALIGNMENT START
   Shared spacing and animation for all button icons
========================================================== */

.primary-btn,
.secondary-btn,
.purchase-btn,
.lh-glossy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
}

.primary-btn i,
.secondary-btn i,
.purchase-btn i,
.lh-glossy-btn i {
    font-size: 0.9rem;
    line-height: 1;
    transition: transform .25s ease;
}

.primary-btn:hover i,
.secondary-btn:hover i,
.purchase-btn:hover i,
.lh-glossy-btn:hover i {
    transform: translateX(4px);
}

/* ==========================================================
   BUTTON ICON ALIGNMENT END
========================================================== */

/* ==========================================================
   MERCH HERO GLOSSY RED REFINEMENT START
========================================================== */

/* Glossy red badge above the heading */
.merch-intro .books-badge {
    position: relative;
    overflow: hidden;

    color: #ffffff !important;

    background:
        linear-gradient(180deg,
            #fff0f2 0%,
            #ffb5bd 13%,
            #f45f6c 45%,
            #d83c49 72%,
            #b92534 100%) !important;

    border: 1px solid rgba(178, 37, 52, 0.30) !important;

    box-shadow:
        0 12px 26px rgba(201, 47, 61, 0.28),
        inset 0 2px 2px rgba(255, 255, 255, 0.72),
        inset 0 -2px 4px rgba(126, 16, 32, 0.18) !important;

    text-shadow:
        0 1px 1px rgba(111, 16, 29, 0.28);
}

/* Gloss highlight across badge */
.merch-intro .books-badge::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 9%;
    width: 82%;
    height: 42%;

    border-radius: 999px;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.78),
            rgba(255, 255, 255, 0.12));

    pointer-events: none;
}


/* Glossy red-to-light headline */
.merch-intro .section-title {
    background:
        linear-gradient(180deg,
            #fff0f2 0%,
            #ffadb6 14%,
            #f45f6c 42%,
            #d63d4b 70%,
            #a92131 100%) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;
    color: transparent !important;

    filter:
        drop-shadow(0 2px 0 rgba(255, 255, 255, 0.28)) drop-shadow(0 7px 12px rgba(177, 39, 53, 0.14));
}


/* Glossy storefront icon circle */
.merch-intro .books-divider span {
    position: relative;
    overflow: hidden;

    width: 64px;
    height: 64px;

    color: #ffffff !important;

    background:
        linear-gradient(180deg,
            #fff0f2 0%,
            #ffadb6 13%,
            #f45f6c 44%,
            #d83c49 72%,
            #b92534 100%) !important;

    border: 1px solid rgba(178, 37, 52, 0.28) !important;

    box-shadow:
        0 14px 30px rgba(201, 47, 61, 0.25),
        inset 0 2px 2px rgba(255, 255, 255, 0.70),
        inset 0 -3px 5px rgba(126, 16, 32, 0.16) !important;
}


/* Storefront symbol */
.merch-intro .books-divider span i {
    position: relative;
    z-index: 2;

    color: #ffffff !important;

    text-shadow:
        0 2px 3px rgba(111, 16, 29, 0.25);
}


/* Gloss highlight across icon circle */
.merch-intro .books-divider span::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 10%;

    width: 80%;
    height: 42%;

    border-radius: 999px;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.82),
            rgba(255, 255, 255, 0.08));

    pointer-events: none;
    z-index: 1;
}


/* Mobile icon sizing */
@media (max-width: 768px) {

    .merch-intro .books-divider span {
        width: 58px;
        height: 58px;
    }

}

/* ==========================================================
   MERCH HERO GLOSSY RED REFINEMENT END
========================================================== */


/* ==========================================================
   MY ACCOUNT - LITTLE HERO RED THEME START
========================================================== */

/* Dashboard circular icons */
.account-dashboard .feature-icon,
.account-dashboard .profile-icon,
.account-dashboard .favorites-icon,
.account-dashboard .email-icon,
.account-dashboard .stat-icon,
.account-dashboard .welcome-icon,
.account-dashboard .member-icon {

    background: linear-gradient(180deg,
            #fff0f2 0%,
            #ffb5bd 12%,
            #f45f6c 45%,
            #d83c49 72%,
            #b92534 100%) !important;

    color: #ffffff !important;

    box-shadow:
        0 14px 28px rgba(201, 47, 61, .24),
        inset 0 2px 2px rgba(255, 255, 255, .70),
        inset 0 -2px 5px rgba(126, 16, 32, .18);

    position: relative;
    overflow: hidden;
}

.account-dashboard .feature-icon::before,
.account-dashboard .profile-icon::before,
.account-dashboard .favorites-icon::before,
.account-dashboard .email-icon::before,
.account-dashboard .stat-icon::before,
.account-dashboard .welcome-icon::before,
.account-dashboard .member-icon::before {

    content: "";
    position: absolute;

    top: 3px;
    left: 10%;

    width: 80%;
    height: 42%;

    border-radius: 999px;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .78),
            rgba(255, 255, 255, .10));
}


/* Dashboard buttons */

.account-dashboard .btn-primary,
.account-dashboard .btn-danger,
.account-dashboard .update-profile-btn,
.account-dashboard .favorites-btn,
.account-dashboard .profile-btn {

    border: none !important;

    color: #fff !important;

    background: linear-gradient(180deg,
            #ffb6be 0%,
            #f45f6c 40%,
            #d83c49 72%,
            #b92534 100%) !important;

    border-radius: 999px;

    box-shadow:
        0 16px 34px rgba(201, 47, 61, .25),
        inset 0 2px 2px rgba(255, 255, 255, .65),
        inset 0 -2px 4px rgba(126, 16, 32, .18);

    transition: .25s ease;
}

.account-dashboard .btn-primary:hover,
.account-dashboard .btn-danger:hover,
.account-dashboard .update-profile-btn:hover,
.account-dashboard .favorites-btn:hover,
.account-dashboard .profile-btn:hover {

    transform: translateY(-2px);

    filter: brightness(.96);

    box-shadow:
        0 20px 42px rgba(201, 47, 61, .34);
}

/* ==========================================================
   MY ACCOUNT - LITTLE HERO RED THEME END
========================================================== */


/* FAVORITES HERO GLOSSY RED START */

/* Favorites hero badge */
.favorites-hero .books-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    position: relative;
    overflow: hidden;

    padding: 0.55rem 1.25rem;

    border: 1px solid rgba(184, 37, 52, 0.18);
    border-radius: 999px;

    background: linear-gradient(180deg,
            #fff2f4 0%,
            #ffb8c0 16%,
            #f45f6c 46%,
            #d83c49 74%,
            #b92534 100%);

    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;

    box-shadow:
        0 10px 22px rgba(201, 47, 61, 0.22),
        inset 0 2px 2px rgba(255, 255, 255, 0.75),
        inset 0 -3px 5px rgba(118, 17, 30, 0.18);

    text-shadow:
        0 1px 2px rgba(111, 15, 28, 0.22);
}

/* Glossy highlight across badge */
.favorites-hero .books-badge::before {
    content: "";

    position: absolute;
    top: 2px;
    left: 8%;

    width: 84%;
    height: 42%;

    border-radius: 999px;

    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.88),
            rgba(255, 255, 255, 0.08));

    pointer-events: none;
}

/* Favorites hero title */
.favorites-hero .section-title {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;

    font-weight: 900;
    line-height: 1.12;

    background: linear-gradient(180deg,
            #ffb6be 0%,
            #f45f6c 30%,
            #d83c49 62%,
            #b92534 100%);

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    filter: drop-shadow(0 3px 3px rgba(164, 32, 47, 0.16));
}

/* Keep subtitle clean and readable */
.favorites-hero .section-subtitle {
    max-width: 680px;
    color: #667085;
}

/* Glossy divider heart container */
.favorites-hero .books-divider span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    position: relative;
    overflow: hidden;

    width: 48px;
    height: 48px;

    border-radius: 50%;
    border: 1px solid rgba(184, 37, 52, 0.20);

    background: linear-gradient(180deg,
            #fff2f4 0%,
            #ffb7bf 15%,
            #f45f6c 43%,
            #d83c49 72%,
            #b92534 100%);

    box-shadow:
        0 11px 22px rgba(201, 47, 61, 0.22),
        inset 0 2px 2px rgba(255, 255, 255, 0.75),
        inset 0 -3px 5px rgba(118, 17, 30, 0.18);
}

/* Divider gloss */
.favorites-hero .books-divider span::before {
    content: "";

    position: absolute;
    top: 3px;
    left: 10%;

    width: 80%;
    height: 42%;

    border-radius: 999px;

    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.86),
            rgba(255, 255, 255, 0.06));

    pointer-events: none;
}

/* White heart */
.favorites-hero .books-divider span i {
    position: relative;
    z-index: 2;

    color: #ffffff;
    font-size: 1.08rem;

    text-shadow:
        0 2px 3px rgba(111, 15, 28, 0.25);
}

/* Soft premium hero background */
.favorites-hero {
    background:
        radial-gradient(circle at 50% 0%,
            rgba(255, 218, 223, 0.36),
            transparent 48%),
        linear-gradient(180deg,
            #fffafa 0%,
            #ffffff 100%);
}

@media (max-width: 768px) {
    .favorites-hero .section-title {
        font-size: clamp(2rem, 9vw, 2.8rem);
    }

    .favorites-hero .books-badge {
        padding: 0.48rem 1rem;
        font-size: 0.75rem;
    }

    .favorites-hero .books-divider span {
        width: 44px;
        height: 44px;
    }
}

/* FAVORITES HERO GLOSSY RED END */


/* ==========================================================
   FAVORITES PURCHASE BUTTON GLOSSY RED START
========================================================== */

.favorites-page .purchase-btn {
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(178, 37, 52, 0.28);
    border-radius: 999px;

    background: linear-gradient(180deg,
            #ffb7bf 0%,
            #f45f6c 18%,
            #d83c49 58%,
            #b92534 100%);

    color: #ffffff;
    font-weight: 800;

    box-shadow:
        0 12px 24px rgba(201, 47, 61, 0.24),
        inset 0 2px 2px rgba(255, 255, 255, 0.72),
        inset 0 -3px 5px rgba(118, 17, 30, 0.20);

    text-shadow:
        0 1px 2px rgba(111, 15, 28, 0.24);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.favorites-page .purchase-btn::before {
    content: "";

    position: absolute;
    top: 2px;
    left: 7%;

    width: 86%;
    height: 42%;

    border-radius: 999px;

    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.88),
            rgba(255, 255, 255, 0.08));

    pointer-events: none;
}

.favorites-page .purchase-btn:hover {
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 16px 30px rgba(201, 47, 61, 0.30),
        inset 0 2px 2px rgba(255, 255, 255, 0.78),
        inset 0 -3px 5px rgba(118, 17, 30, 0.22);
}

.favorites-page .purchase-btn:focus,
.favorites-page .purchase-btn:active {
    color: #ffffff;
}

/* LOGIN MODAL GLOSSY PRIMARY BUTTON START */

#loginModal .login-glossy-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;

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

    width: 100%;
    padding: 0.9rem 1.25rem;

    border-radius: 999px;
    border: 1px solid rgba(23, 63, 115, 0.24);

    color: #ffffff !important;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;

    background:
        linear-gradient(180deg,
            #3976d8 0%,
            #2f69c8 36%,
            #2359b1 68%,
            #173f73 100%) !important;

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.30),
        inset 0 -2px 0 rgba(8, 42, 87, 0.18),
        0 14px 30px rgba(31, 88, 173, 0.26) !important;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}

#loginModal .login-glossy-btn::before {
    content: "";

    position: absolute;
    z-index: -1;

    left: 10%;
    right: 10%;
    top: 3px;

    height: 42%;
    border-radius: 999px;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.42),
            rgba(255, 255, 255, 0.08));

    pointer-events: none;
}

#loginModal .login-glossy-btn:hover,
#loginModal .login-glossy-btn:focus {
    color: #ffffff !important;

    background:
        linear-gradient(180deg,
            #4380e2 0%,
            #3477d5 36%,
            #2865b8 68%,
            #1a477f 100%) !important;

    transform: translateY(-2px);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.34),
        inset 0 -2px 0 rgba(8, 42, 87, 0.18),
        0 18px 38px rgba(31, 88, 173, 0.34) !important;
}

#loginModal .login-glossy-btn:active {
    transform: translateY(0);

    box-shadow:
        inset 0 2px 5px rgba(8, 42, 87, 0.20),
        0 6px 14px rgba(31, 88, 173, 0.24) !important;
}

/* LOGIN MODAL GLOSSY PRIMARY BUTTON END */
/* ==========================================================
   KEEP THE COMPASS TRAILER — MOBILE CLOSE BUTTON HOTFIX
========================================================== */

#ktc-trailer-modal {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#ktc-trailer-modal .ktc-trailer-dialog {
    position: relative;
    max-height: none;
}

#ktc-trailer-modal .ktc-trailer-close {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 999999 !important;

    width: 44px;
    height: 44px;
    border-radius: 50%;

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

    background: rgba(8, 17, 38, 0.95) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;

    font-size: 30px !important;
    line-height: 1 !important;
    cursor: pointer;
}

@media (max-width: 768px) {
    #ktc-trailer-modal {
        align-items: flex-start !important;
        padding: 64px 12px 24px !important;
    }

    #ktc-trailer-modal .ktc-trailer-dialog {
        width: 100% !important;
        margin: 0 auto !important;
    }

    #ktc-trailer-modal .ktc-trailer-video-stage {
        width: 100%;
    }
}

/* ==========================================================
   KEEP THE COMPASS TRAILER MOTION
========================================================== */

.ktc-trailer-dialog--animated {
    opacity: 0;
    transform: translateY(30px) scale(.96);
}

.ktc-trailer-branding--animated {
    opacity: 0;
    transform: translateX(-35px);
}

.ktc-trailer-video-stage--animated {
    opacity: 0;
    transform: translateX(35px);
}


/* ==========================================================
   OPEN STATE
========================================================== */

.ktc-trailer-modal.is-open .ktc-trailer-dialog--animated {
    opacity: 1;
    transform: translateY(0) scale(1);

    transition:
        opacity .45s ease,
        transform .70s cubic-bezier(.22, 1, .36, 1);
}

.ktc-trailer-modal.is-open .ktc-trailer-branding--animated {
    opacity: 1;
    transform: translateX(0);

    transition:
        opacity .45s ease .10s,
        transform .70s cubic-bezier(.22, 1, .36, 1) .10s;
}

.ktc-trailer-modal.is-open .ktc-trailer-video-stage--animated {
    opacity: 1;
    transform: translateX(0);

    transition:
        opacity .45s ease .20s,
        transform .70s cubic-bezier(.22, 1, .36, 1) .20s;
}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .ktc-trailer-dialog--animated,
    .ktc-trailer-branding--animated,
    .ktc-trailer-video-stage--animated {

        opacity: 1;
        transform: none;
        transition: none;

    }

}