/* Brand bridge for three imported OPAL'S CAKE sections */
:root {
    --primary: #4D2C1C;
    --secondary: #416D3B;
    --soft: #F8F6F0;
    --soft-2: #E9EFE3;
    --line: #E5DDD0;
    --shadow: 0 18px 50px rgba(77, 44, 28, .10)
}

[hidden] {
    display: none !important
}

.best-sellers,
.instagram-section,
.contact-section {
    padding: 90px 0
}

.best-sellers .section-title h2,
.instagram-section h2,
.contact-section h2 {
    font-family: Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1.15;
    margin: 10px 0 15px;
    color: var(--brown)
}

.best-sellers .section-title h2 em,
.instagram-section h2 em,
.contact-section h2 em {
    color: var(--green)
}

.best-sellers .kicker,
.instagram-section .kicker,
.contact-section .kicker {
    font-size: .72rem;
    letter-spacing: .15em;
    font-weight: 800;
    color: var(--green)
}

.best-sellers .section-title p,
.instagram-content p,
.contact-section .section-title p {
    color: var(--muted);
    line-height: 1.8
}

.best-sellers .product-carousel {
    overflow: hidden
}

.best-sellers .product-track {
    display: flex;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
    transform: translateX(0)
}

.best-sellers .product-card {
    flex: 0 0 calc((100% - 40px)/3)
}

.best-sellers .product-gallery {
    background: #F3F1E9
}

.best-sellers .product-gallery-slide img {
    object-fit: cover;
    padding: 0px;
}

.best-sellers .product-tab.active,
.best-sellers .product-tab:hover {
    background: var(--green);
    border-color: var(--green)
}

.best-sellers .product-order {
    background: var(--green);
    border: 0;
    cursor: pointer
}

.best-sellers .product-order:hover {
    background: var(--brown)
}

.best-sellers .product-category-badge {
    color: var(--green)
}

.best-sellers .best-footer .btn {
    cursor: pointer
}

.instagram-section {
    background: linear-gradient(145deg, #F7F5EE, #EEF2E8)
}

.instagram-section .instagram-follow-btn {
    background: linear-gradient(135deg, var(--green), var(--brown));
    color: white
}

.instagram-section .instagram-card img {
    object-fit: cover;
    background: #F5F3EC
}

.contact-section {
    background: #FDFCF8
}

.contact-section .contact-panel,
.contact-section .map-panel {
    border: 1px solid var(--line);
    background: #fff
}

.contact-section .contact-item {
    color: var(--ink)
}

.contact-section .contact-icon {
    color: var(--green)
}

.contact-section .social-links button {
    cursor: pointer
}

.contact-section .map-frame iframe {
    width: 100%;
    height: 100%;
    min-height: 310px;
    border: 0
}

.contact-section .opal-legal {
    margin-top: 25px;
    padding-top: 17px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.8
}

@media(max-width:1050px) {
    .best-sellers .product-card {
        flex-basis: calc((100% - 20px)/2)
    }
}

@media(max-width:720px) {

    .instagram-section .instagram-grid,
    .contact-section .contact-grid {
        grid-template-columns: 1fr;
        gap: 26px
    }

    .instagram-section .instagram-visual {
        min-height: 330px
    }
}

@media(max-width:580px) {
    .best-sellers .product-card {
        flex-basis: 100%
    }

    .best-sellers,
    .instagram-section,
    .contact-section {
        padding: 65px 0
    }

    .best-sellers .product-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none
    }

    .best-sellers .product-tab {
        white-space: nowrap
    }

    .contact-section .contact-panel,
    .contact-section .map-panel {
        padding: 20px
    }
}