/* All rules are isolated to the Home cafe modal. */
#cafeModal .modal-content {
    border: 0;
    border-radius: 24px;
    overflow: hidden;
    background: #fffdf9;
    color: #173e34
}

#cafeModal .modal-header {
    padding: 22px 32px;
    border-bottom: 1px solid #e8e4dc;
    gap: 20px;
    background: #fffdf9
}

#cafeModal .modal-title {
    font-size: 25px;
    color: #173e34
}

#cafeModal .modal-body {
    padding: 0;
    overscroll-behavior: contain
}

#cafeModal .cafe-eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    color: #5c7265;
    margin: 0 0 8px
}

#cafeModal h3 {
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.15;
    color: #173e34;
    margin-bottom: 20px
}

#cafeModal h4 {
    font-size: 22px;
    color: #173e34;
    margin: 0 0 20px
}

#cafeModal p {
    font-size: 16px;
    line-height: 1.8;
    color: #626c63
}

#cafeModal .cafe-photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px
}

#cafeModal .cafe-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 32px;
    align-items: center
}

#cafeModal .cafe-story-photo .cafe-photo {
    aspect-ratio: 4/5;
    object-fit: cover
}

#cafeModal .cafe-atmosphere {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 0 32px 32px
}

#cafeModal .cafe-atmosphere .cafe-photo {
    aspect-ratio: 4/3;
    height: 100%;
    object-fit: cover
}

#cafeModal .cafe-label {
    display: inline-block;
    border: 1px solid #ccd9cf;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 11px;
    margin-bottom: 20px;
    color: #315b43
}

#cafeModal .cafe-characters {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px
}

#cafeModal .cafe-characters .cafe-photo {
    width: 140px;
    max-height: 145px;
    object-fit: contain
}

#cafeModal .cafe-characters p {
    font-size: 13px;
    font-style: italic;
    margin: 0
}

#cafeModal .cafe-menu {
    padding: 36px 32px;
    background: #f0f4ed
}

#cafeModal .cafe-section-heading {
    max-width: 850px
}

#cafeModal .cafe-menu-types {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 32px
}

#cafeModal .cafe-menu-types span {
    padding: 7px 15px;
    border: 1px solid #cbd6c8;
    border-radius: 20px;
    font-size: 13px
}

#cafeModal .cafe-bagel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px
}

#cafeModal figure {
    margin: 0;
    min-width: 0
}

#cafeModal .cafe-bagel-grid .cafe-photo {
    object-fit: contain;
    background: #fff
}

#cafeModal .cafe-fresh {
    margin-top: 32px
}

#cafeModal .cafe-fresh-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px
}

#cafeModal .cafe-moments {
    padding: 36px 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center
}

#cafeModal .cafe-moments-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: center
}

#cafeModal .cafe-contact {
    padding: 28px 32px;
    background: #e7eee3;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center
}

#cafeModal .cafe-contact h3 {
    font-size: 24px;
    margin: 0
}

#cafeModal .cafe-contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px
}

#cafeModal .cafe-contact-links a {
    color: #173e34;
    font-size: 14px;
    padding: 10px 0
}

#cafeModal a:focus-visible,
#cafeModal button:focus-visible {
    outline: 2px solid #315b43;
    outline-offset: 4px
}

#cafeModal .modal-footer {
    padding: 12px 24px;
    justify-content: space-between;
    background: #fffdf9;
    gap: 12px
}

#cafeModal .modal-footer>span {
    font-size: 12px;
    color: #626c63
}

@media(max-width:767px) {
    #cafeModal .modal-header {
        padding: 18px 20px
    }

    #cafeModal .modal-title {
        font-size: 21px
    }

    #cafeModal .cafe-story,
    #cafeModal .cafe-moments {
        grid-template-columns: 1fr;
        padding: 20px;
        gap: 24px
    }

    #cafeModal .cafe-story-photo .cafe-photo {
        aspect-ratio: 4/3
    }

    #cafeModal .cafe-atmosphere {
        gap: 8px;
        padding: 0 20px 20px
    }

    #cafeModal .cafe-menu {
        padding: 28px 20px
    }

    #cafeModal .cafe-bagel-grid {
        grid-template-columns: 1fr
    }

    #cafeModal .cafe-fresh-grid {
        grid-template-columns: 1fr;
        gap: 20px
    }

    #cafeModal .cafe-contact {
        padding: 24px 20px
    }

    #cafeModal .modal-footer {
        padding: 12px 20px
    }
}
#section_2 .branch-modal .modal-content{border:0;border-radius:20px;overflow:hidden;background:#fffdf9}
#section_2 .branch-modal .modal-header{padding:22px 28px;gap:20px;border-bottom:1px solid #e3e8e1}
#section_2 .branch-modal .branch-kicker{font-size:10px;letter-spacing:.15em;color:#617369;margin:0 0 8px}
#section_2 .branch-modal .modal-title{font-size:26px;color:#173e34}
#section_2 .branch-modal .modal-body{padding:20px 28px;overscroll-behavior:contain}
#section_2 .branch-modal .branch-stage{position:relative;background:#edf0eb;border-radius:12px;overflow:hidden}
#section_2 .branch-modal .branch-slide-image{display:block;width:100%;height: min(52vh,520px);object-fit:contain}
#section_2 .branch-modal .branch-slide-caption{font-size:12px;color:#42594b;text-align:center;padding:10px;margin:0}
#section_2 .branch-modal .carousel-control-prev,#section_2 .branch-modal .carousel-control-next{width:48px;height:48px;top:calc(50% - 24px);bottom:auto;background:#fff;color:#173e34;border-radius:50%;opacity:.95;margin:0 12px;box-shadow:0 2px 12px #0002}
#section_2 .branch-modal .carousel-control-prev>span:first-child,#section_2 .branch-modal .carousel-control-next>span:first-child{font-size:32px;line-height:1}
#section_2 .branch-modal .branch-thumbnails{position:static;margin:16px 0 0;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#section_2 .branch-modal .branch-thumbnails button{width:76px;height:54px;margin:0;padding:3px;border:2px solid transparent;border-radius:8px;box-sizing:border-box;background:transparent;text-indent:0;opacity:.6}
#section_2 .branch-modal .branch-thumbnails button.active{opacity:1;border-color:#315e49}
#section_2 .branch-modal .branch-thumbnails img{width:100%;height:100%;object-fit:cover;border-radius:4px;display:block}
#section_2 .branch-modal .modal-footer{display:flex;justify-content:space-between;gap:16px;padding:16px 28px;border-top:1px solid #e3e8e1}
#section_2 .branch-modal .branch-details{font-size:14px;line-height:1.6}
#section_2 .branch-modal button:focus-visible,#section_2 .branch-modal a:focus-visible{outline:2px solid #315e49;outline-offset:3px}
@media(max-width:575px){#section_2 .branch-modal .modal-header{padding:18px}#section_2 .branch-modal .modal-title{font-size:22px}#section_2 .branch-modal .modal-body{padding:12px}#section_2 .branch-modal .branch-slide-image{height:40vh}#section_2 .branch-modal .modal-footer{padding:16px 18px}#section_2 .branch-modal .carousel-control-prev,#section_2 .branch-modal .carousel-control-next{width:38px;height:38px;margin:0 6px}}
#section_2 .branch-modal .carousel-inner{display:block;padding:0}
#section_2 .branch-modal .carousel-item{display:none;float:left;width:100%;margin:0 -100% 0 0;flex:none}
#section_2 .branch-modal .carousel-item.active,#section_2 .branch-modal .carousel-item-next,#section_2 .branch-modal .carousel-item-prev{display:block}