.elementor-2779 .elementor-element.elementor-element-763295c > .elementor-widget-container{padding:30px 30px 30px 30px;}.elementor-2779 .elementor-element.elementor-element-763295c  .wpc-nav{text-align:center;}.elementor-2779 .elementor-element.elementor-element-763295c .wpc-nav li a{font-family:"Cormorant", Sans-serif;font-weight:600;}.elementor-2779 .elementor-element.elementor-element-763295c .wpc-post-title{font-family:"Cormorant", Sans-serif;}.elementor-2779 .elementor-element.elementor-element-763295c .wpc-menu-price, .elementor-2779 .elementor-element.elementor-element-763295c .wpc-menu-currency{font-family:"Cormorant", Sans-serif;font-size:32px;}@media(max-width:1024px){.elementor-2779 .elementor-element.elementor-element-763295c > .elementor-widget-container{padding:5px 5px 5px 5px;}}/* Start custom CSS for wpc-menu-tab, class: .elementor-element-763295c *//* ========================================================
   THE PEARL / BONDS STYLE — WP CAFE MENU
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&display=swap');

/* ---------- SITE BACKGROUND ---------- */
html,
body,
.site,
#page,
.elementor-page-content-wrapper {
    background-color: #DFDAD7 !important;
}

/* ---------- TABS (sliding, icon + label — like the reference) ---------- */
.wpc-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    align-items: flex-start !important;
    gap: 22px !important;
    margin: 0 0 22px 0 !important;
    padding: 6px 4px 14px 4px !important;
    list-style: none !important;
    border-bottom: 1px solid #ececec !important;
    scrollbar-width: none !important;
}

.wpc-nav::-webkit-scrollbar { display: none !important; }

.wpc-nav li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    flex: 0 0 auto !important;
}

.wpc-nav li::before,
.wpc-nav li::after,
.wpc-nav a::before,
.wpc-nav a::after {
    display: none !important;
    content: none !important;
}

.wpc-nav .wpc-tab-a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 78px !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #6b6b6b !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    min-height: auto !important;
    transition: all 0.25s ease !important;
}

/* --- Icon circle ---
   WP Cafe's tab markup here is just <a class="wpc-tab-a" data-cat_id="18">
   <span>COFFEE</span></a> — no <img>/<svg> at all. So the icon is drawn
   as a ::before pseudo-element (the circle) with a per-category background
   image. Upload each icon to the Media Library, grab its URL, and add one
   rule per data-cat_id below (find each id via Inspect, same way as Coffee). */
.wpc-nav .wpc-tab-a::before {
    content: "" !important;
    display: block !important;
    width: 66px !important;
    height: 66px !important;
    background-color: #DFDAD7 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 42px 42px !important;
    border-radius: 50% !important;
    border: 2px solid transparent !important;
    box-sizing: border-box !important;
    transition: all 0.25s ease !important;
}

/* One rule per tab — all 9 category ids and icon URLs are filled in. */
.wpc-nav .wpc-tab-a[data-cat_id="18"]::before {
    background-image: url('https://bondscafe.cyberboost.io/wp-content/uploads/2026/08/coffee.png') !important;
}
.wpc-nav .wpc-tab-a[data-cat_id="19"]::before { /* Milk Based Coffee */
    background-image: url('https://bondscafe.cyberboost.io/wp-content/uploads/2026/08/milk-based-coffee.png') !important;
}
.wpc-nav .wpc-tab-a[data-cat_id="20"]::before { /* Non-Coffee */
    background-image: url('https://bondscafe.cyberboost.io/wp-content/uploads/2026/08/non-coffee.png') !important;
}
.wpc-nav .wpc-tab-a[data-cat_id="22"]::before { /* Breakfast */
    background-image: url('https://bondscafe.cyberboost.io/wp-content/uploads/2026/08/breakfast.png') !important;
}
.wpc-nav .wpc-tab-a[data-cat_id="23"]::before { /* Sandwiches */
    background-image: url('https://bondscafe.cyberboost.io/wp-content/uploads/2026/08/sandwiches.png') !important;
}
.wpc-nav .wpc-tab-a[data-cat_id="24"]::before { /* Desserts */
    background-image: url('https://bondscafe.cyberboost.io/wp-content/uploads/2026/08/desserts.png') !important;
}
.wpc-nav .wpc-tab-a[data-cat_id="21"]::before { /* Fresh Juice */
    background-image: url('https://bondscafe.cyberboost.io/wp-content/uploads/2026/08/fresh-juice.png') !important;
}
.wpc-nav .wpc-tab-a[data-cat_id="25"]::before { /* Cool Bag */
    background-image: url('https://bondscafe.cyberboost.io/wp-content/uploads/2026/08/cool-bag.png') !important;
}
.wpc-nav .wpc-tab-a[data-cat_id="26"]::before { /* Water */
    background-image: url('https://bondscafe.cyberboost.io/wp-content/uploads/2026/08/water.png') !important;
}

.wpc-nav .wpc-tab-a span {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    border: none !important;
    color: inherit !important;
}

.wpc-nav .wpc-tab-a:hover::before {
    border-color: #d8c9b8 !important;
}

.wpc-nav .wpc-tab-a:hover {
    color: #3c2a1e !important;
}

.wpc-nav .wpc-tab-a.wpc-active {
    color: #323C31 !important;
    font-weight: 700 !important;
}

.wpc-nav .wpc-tab-a.wpc-active::before {
    border-color: #323C31 !important;
    box-shadow: 0 0 0 1px #323C31 !important;
}

.wpc-nav .wpc-tab-a.wpc-active span,
.wpc-nav .wpc-tab-a:hover span {
    color: inherit !important;
}

/* ---------- OUTER GRID → SINGLE COLUMN LIST ---------- */
.wpc-food-block-tab-item > .wpc-row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
}

.wpc-food-block-tab-item > .wpc-row > .wpc-col-lg-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin-bottom: 26px !important;
    box-sizing: border-box !important;
}

/* ---------- PRODUCT CARD ---------- */
.wpc-food-menu-item.wpc-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    background: #DFDAD7 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.wpc-food-menu-item.wpc-row > .wpc-col-md-4 {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wpc-food-menu-item.wpc-row > .wpc-col-md-8 {
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* ---------- IMAGE ---------- */
.wpc-food-menu-thumb {
    width: 175px !important;
    flex: 0 0 175px !important;
    margin: 0 !important;
}

.wpc-food-menu-thumb a {
    display: block !important;
    width: 175px !important;
}

.wpc-food-menu-thumb img {
    display: block !important;
    width: 175px !important;
    height: 175px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
}

/* ---------- CONTENT ---------- */
.wpc-food-inner-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.wpc-menu-tag-wrap { display: none !important; }

.wpc-post-title.wpc-title-with-border {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    margin: 0 0 5px 0 !important;
    line-height: 1.3 !important;
}

.wpc-post-title.wpc-title-with-border > a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    font-family: 'Cormorant', serif !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: #111111 !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    margin: 0 0 4px 0 !important;
}

.wpc-title-border { display: none !important; }

/* ---------- PRICE (QAR smaller than number) ---------- */
.wpc-post-title.wpc-title-with-border .wpc-menu-price {
    display: block !important;
    width: 100% !important;
    position: static !important;
    float: none !important;
    clear: both !important;
    text-align: left !important;
    margin: 0 0 7px 0 !important;
    padding: 0 !important;
    font-family: 'Cormorant', serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #3c2a1e !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
}

.wpc-post-title.wpc-title-with-border .wpc-menu-price *,
.wpc-post-title.wpc-title-with-border .woocommerce-Price-amount,
.wpc-post-title.wpc-title-with-border .woocommerce-Price-currencySymbol {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #3c2a1e !important;
    font-family: 'Cormorant', serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
}

.wpc-post-title.wpc-title-with-border .woocommerce-Price-currencySymbol {
    font-size: 0 !important;
}

.wpc-post-title.wpc-title-with-border .woocommerce-Price-currencySymbol::after {
    content: "" !important;
}

.wpc-post-title.wpc-title-with-border .wpc-menu-price::after {
    content: " QAR" !important;
    font-family: 'Cormorant', serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #3c2a1e !important;
}

/* ---------- DESCRIPTION (collapsed by default, expands via JS) ---------- */
.wpc-food-inner-content p {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 4px 0 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    color: #323C31 !important;
    text-transform: none !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* Expanded state — JS adds this class on "Read more" click */
.wpc-food-inner-content p.wpc-expanded {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
}

/* Read more / Read less toggle link */
.wpc-readmore-toggle {
    display: inline-block !important;
    margin: 0 0 8px 0 !important;
    font-family: 'Cormorant', serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #3c2a1e !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

.wpc-readmore-toggle:hover {
    opacity: 0.75 !important;
}

.wpc_loader_wrapper { display: none !important; }

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
    .wpc-nav {
        gap: 16px !important;
        margin-bottom: 18px !important;
    }

    .wpc-nav .wpc-tab-a {
        width: 66px !important;
        font-size: 12.5px !important;
    }

    .wpc-nav .wpc-tab-a::before {
        width: 56px !important;
        height: 56px !important;
        background-size: 36px 36px !important;
    }

    .wpc-food-menu-item.wpc-row {
        gap: 12px !important;
    }

    .wpc-food-menu-thumb,
    .wpc-food-menu-thumb a {
        width: 135px !important;
        flex: 0 0 135px !important;
    }

    .wpc-food-menu-thumb img {
        width: 135px !important;
        height: 135px !important;
        border-radius: 10px !important;
    }

    .wpc-post-title.wpc-title-with-border > a {
        font-size: 17px !important;
        line-height: 1.25 !important;
    }

    .wpc-post-title.wpc-title-with-border .wpc-menu-price,
    .wpc-post-title.wpc-title-with-border .woocommerce-Price-amount,
    .wpc-post-title.wpc-title-with-border .woocommerce-Price-currencySymbol {
        font-size: 17px !important;
    }

    .wpc-post-title.wpc-title-with-border .wpc-menu-price::after {
        font-size: 12px !important;
    }

    .wpc-food-inner-content p {
        font-size: 14.5px !important;
        -webkit-line-clamp: 3 !important;
    }

    /* keep expanded state working on mobile too */
    .wpc-food-inner-content p.wpc-expanded {
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }

    .wpc-readmore-toggle {
        font-size: 13px !important;
    }

    .wpc-food-block-tab-item > .wpc-row > .wpc-col-lg-6 {
        margin-bottom: 20px !important;
    }
}

@media (max-width: 380px) {
    .wpc-nav .wpc-tab-a {
        width: 58px !important;
    }

    .wpc-nav .wpc-tab-a::before {
        width: 50px !important;
        height: 50px !important;
        background-size: 32px 32px !important;
    }

    .wpc-food-menu-thumb,
    .wpc-food-menu-thumb a {
        width: 110px !important;
        flex: 0 0 110px !important;
    }

    .wpc-food-menu-thumb img {
        width: 110px !important;
        height: 110px !important;
    }

    .wpc-post-title.wpc-title-with-border > a {
        font-size: 15.5px !important;
    }

    .wpc-post-title.wpc-title-with-border .wpc-menu-price,
    .wpc-post-title.wpc-title-with-border .woocommerce-Price-amount,
    .wpc-post-title.wpc-title-with-border .woocommerce-Price-currencySymbol {
        font-size: 15px !important;
    }

    .wpc-post-title.wpc-title-with-border .wpc-menu-price::after {
        font-size: 11px !important;
    }

    .wpc-food-inner-content p {
        font-size: 13px !important;
    }
}

/* ---------- PAGINATION ---------- */
.wpc-pagination-list {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    list-style: none !important;
    margin: 30px 0 0 0 !important;
    padding: 0 !important;
}

.wpc-pagination-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wpc-pagination-item a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    border: 1px solid #e0d9d0 !important;
    background: #fff !important;
    color: #3c2a1e !important;
    font-family: 'Cormorant', serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.wpc-pagination-item a:hover {
    background: #3c2a1e !important;
    border-color: #3c2a1e !important;
    color: #fff !important;
}

.wpc-pagination-item.is-current a {
    background: #3c2a1e !important;
    border-color: #3c2a1e !important;
    color: #ffffff !important;
}

.wpc-pagination-item.is-disabled a {
    opacity: 0.4 !important;
    pointer-events: none !important;
    cursor: default !important;
}/* End custom CSS */