.page-content {
        padding-top: 72px !important;
    }

    /* Special text label on business detail page */
    .biz-detail-special-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        background: var(--action);
        color: #fff;
        font-size: var(--fs-sm);
        font-weight: 600;
        padding: 0.35rem 0.75rem;
        border-radius: 4px;
        letter-spacing: 0.01em;
        line-height: 1.3;
        align-self: center;
        white-space: nowrap;
        box-shadow: 0 2px 8px rgba(var(--brand-rgb), 0.35);
    }

    .biz-detail-special-badge i {
        font-size: var(--fs-xs);
        opacity: 0.85;
        flex-shrink: 0;
    }

    /* Special text banner at top of sticky business card */
    .sticky-card-special-banner {
        background: var(--action);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        padding: 0.35rem 0.75rem;
        border-radius: 1rem 1rem 0 0;
        letter-spacing: 0.01em;
        line-height: 1.4;
        display: flex;
        align-items: flex-start;
        gap: 0.3rem;
        word-break: break-word;
    }

    .sticky-card-special-banner i {
        flex-shrink: 0;
        margin-top: 2px;
        font-size: 11px;
        opacity: 0.85;
    }

    /* When banner is present, card's top corners are square (banner handles them) */
    .sticky-biz-card .card.has-special-banner {
        border-radius: 0 0 1rem 1rem;
    }

    .back-link {
        font-weight: 600;
        color: var(--action);
        text-decoration: none;
    }
    @media (hover: hover) {
    .back-link:hover {
        text-decoration: underline;
    }
}
    .biz-breadcrumb-stack {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        align-items: center;
    }
    .biz-breadcrumb-card {
        width: 100%;
        flex: 1 1 auto;
        min-width: 0;
    }
    .biz-breadcrumb-list {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 0;
        list-style: none;
        padding: 0;
        margin: 0;
        max-width: 100%;
        border: none;
        background: transparent;
        box-shadow: none;
    }
    .biz-breadcrumb-entry,
    .biz-breadcrumb-separator {
        display: inline-flex;
        align-items: center;
        min-width: 0;
    }
    /* Plain, small breadcrumb (Agoda-style): underlined grey links, grey chevrons, dark current */
    .biz-breadcrumb-link,
    .biz-breadcrumb-current {
        font-size: 12px;
        font-weight: 400;
        line-height: 17px;
        max-width: 100%;
    }
    .biz-breadcrumb-link {
        color: #5e6b82;
        text-decoration: underline;
    }
    .biz-breadcrumb-link:focus-visible {
        color: #000;
    }
    @media (hover: hover) {
    .biz-breadcrumb-link:hover {
        color: #000;
    }
}
    .biz-breadcrumb-current {
        color: #000;
        overflow-wrap: anywhere;
    }
    .biz-breadcrumb-separator {
        color: #5e6b82;
        font-size: 8px;
        padding: 0 9px;
    }
    .biz-back-link {
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        color: var(--primary-blue-dark);
        font-weight: 700;
        text-decoration: none;
    }
    .biz-back-link:focus-visible {
        color: var(--primary-blue);
        text-decoration: none;
    }
    @media (hover: hover) {
    .biz-back-link:hover {
        color: var(--primary-blue);
        text-decoration: none;
    }
}
    .biz-back-link-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: 999px;
        background: rgba(var(--brand-rgb), 0.12);
        color: inherit;
        transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }
    .biz-back-link:focus-visible .biz-back-link-icon {
        background: var(--primary-blue);
        color: #ffffff;
        transform: translateX(-2px);
        box-shadow: 0 10px 22px rgba(var(--brand-rgb), 0.24);
    }
    @media (hover: hover) {
    .biz-back-link:hover .biz-back-link-icon {
        background: var(--primary-blue);
        color: #ffffff;
        transform: translateX(-2px);
        box-shadow: 0 10px 22px rgba(var(--brand-rgb), 0.24);
    }
}
    .main-photo-wrapper {
        border-radius: 1rem;
        overflow: hidden;
        background: var(--brand-subtle);
    }
    .main-photo-btn {
        display: block;
        padding: 0;
        border: none;
        background: transparent;
        width: 100%;
        cursor: pointer;
    }
    .main-photo-btn:focus {
        outline: none;
        box-shadow: none;
    }
    .main-photo {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: contain;
        background: var(--brand-subtle);
        display: block;
    }
    .photo-gallery-header {
        border-bottom: none;
        background: var(--primary-blue);
        color: #fff;
        border-radius: 1.25rem 1.25rem 0 0;
        padding: 1rem 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .photo-gallery-header i {
        color: #fff;
        font-size: var(--fs-base);
        background: rgba(255, 255, 255, 0.2);
        border-radius: 999px;
        padding: 0.5rem;
    }
    .photo-gallery-header h5 {
        color: #fff;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0;
    }
    /* Compact gallery styles for desktop side-by-side layout */
    .photo-gallery-compact {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .photo-gallery-compact .photo-gallery-header {
        padding: 0.75rem 1rem;
        border-radius: 1rem 1rem 0 0;
        flex-shrink: 0;
    }
    .photo-gallery-compact .photo-gallery-header h5 {
        font-size: var(--fs-sm);
    }
    .photo-gallery-compact .photo-gallery-header i {
        font-size: var(--fs-sm);
        padding: 0.4rem;
    }
    .photo-gallery-compact .card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 0.5rem !important;
    }
    .photo-gallery-compact .photo-carousel {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
    }
    .photo-gallery-compact .carousel-inner {
        height: 100%;
    }
    .photo-gallery-compact .carousel-item {
        height: 100%;
    }
    .photo-gallery-compact .photo-carousel-btn {
        height: 100%;
        display: block;
    }
    .photo-gallery-compact .photo-carousel-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .photo-gallery-compact .carousel-control-prev,
    .photo-gallery-compact .carousel-control-next {
        width: 30px;
        height: 30px;
        top: 50%;
        transform: translateY(-50%);
    }
    .photo-gallery-compact .carousel-control-prev-icon,
    .photo-gallery-compact .carousel-control-next-icon {
        width: 20px;
        height: 20px;
    }
    .photo-carousel .carousel-item {
        border-radius: 1rem;
        overflow: hidden;
    }
    .photo-carousel-btn {
        display: block;
        border: none;
        background: transparent;
        padding: 0;
        width: 100%;
        cursor: pointer;
    }
    .photo-carousel-btn-full-height {
        height: 100%;
    }
    .photo-carousel-btn:focus {
        outline: none;
        box-shadow: none;
    }
    .photo-carousel-embed {
        width: 100%;
        height: 100%;
        pointer-events: none;
    }
    .photo-carousel-image {
        width: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
        display: block;
    }
    .photo-carousel .carousel-control-prev,
    .photo-carousel .carousel-control-next {
        top: 50%;
        transform: translateY(-50%);
        width: 3rem;
        height: 3rem;
        background: transparent;
        border: none;
        opacity: 1;
        transition: transform 0.2s ease;
        padding: 0;
    }
    @media (hover: hover) {
    .photo-carousel .carousel-control-prev:hover,
    .photo-carousel .carousel-control-next:hover {
        transform: translateY(-50%) scale(1.05);
    }
}
    .photo-carousel .carousel-control-prev:focus,
    .photo-carousel .carousel-control-next:focus {
        box-shadow: none;
    }
    .photo-carousel .carousel-control-prev-icon,
    .photo-carousel .carousel-control-next-icon {
        width: 100%;
        height: 100%;
        background-size: 70% 70%;
        background-position: center;
        background-repeat: no-repeat;
        filter: none;
    }
    .photo-carousel .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230d6efd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M10.5 3.5 6.5 8l4 4.5'/%3e%3c/svg%3e");
    }
    .photo-carousel .carousel-control-next-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230d6efd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M5.5 3.5 9.5 8l-4 4.5'/%3e%3c/svg%3e");
    }
    .photo-carousel .carousel-indicators {
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }
    .photo-carousel .carousel-indicators [data-bs-target] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: rgba(var(--brand-rgb), 0.25);
    }
    .photo-carousel .carousel-indicators .active {
        width: 26px;
        border-radius: 999px;
        background-color: var(--action);
    }
    #photoModal .modal-body {
        position: relative;
        background: #000;
    }
    #modalPhoto {
        width: 100%;
        max-height: 80vh;
        object-fit: contain;
        display: block;
        margin: 0 auto;
        background: #000;
    }
    .modal-photo-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 50%;
        border: none;
        background: rgba(var(--brand-rgb), 0.9);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--fs-base);
        z-index: 20;
        cursor: pointer;
        transition: all 0.25s ease;
        box-shadow: 0 6px 16px rgba(var(--brand-rgb), 0.35);
    }
    @media (hover: hover) {
    .modal-photo-nav-btn:hover:not(:disabled) {
        background: rgba(var(--brand-rgb), 1);
        transform: translateY(-50%) scale(1.05);
    }
}
    .modal-photo-nav-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        box-shadow: none;
    }
    #modalPhotoPrev {
        left: 1.5rem;
    }
    #modalPhotoNext {
        right: 1.5rem;
    }
    .modal-photo-counter {
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        padding: 0.35rem 0.75rem;
        border-radius: 999px;
        font-size: var(--fs-sm);
        font-weight: 600;
        letter-spacing: 0.5px;
        z-index: 20;
    }
    .sticky-biz-card {
        position: sticky;
        top: 80px;
        z-index: 5;
        width: 100%;
        max-width: 340px;
        max-height: 70vh;
        margin-left: auto;
        align-self: flex-start;
    }
    .sticky-biz-card .card {
        border-radius: 1rem;
        height: 100%;
        max-height: 100%;
        overflow-y: auto;

    }
    .sticky-biz-card .card-body {
        padding: 0.95rem;
    }
    .sticky-card-photo {
        width: 100%;
        height: 190px;
        object-fit: contain;
        background: var(--brand-subtle);
    }
    @media (max-width: 576px) {
        .sticky-card-photo {
            height: 170px;
        }
    }
    .sticky-biz-card h4 {
        font-size: var(--fs-sm);
        font-weight: 700;
        line-height: 1.3;
    }
    .sticky-card-summary {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
        align-items: end;
        column-gap: 0.85rem;
        row-gap: 0.35rem;
        margin-bottom: 0.8rem;
    }
    .sticky-card-title {
        min-width: 0;
        margin-bottom: 0 !important;
    }
    .sticky-card-rating {
        font-size: var(--fs-sm);
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
        margin-bottom: 0 !important;
    }
    .sticky-card-rating-score {
        display: flex;
        justify-content: flex-end;
        white-space: nowrap;
    }
    .sticky-card-rating-count {
        display: block;
        margin-top: 0.12rem;
        white-space: nowrap;
    }
    .sticky-card-rating .text-warning i {
        font-size: var(--fs-xs);
    }
    .sticky-card-rating .fw-semibold {
        font-size: var(--fs-sm);
    }
    .sticky-card-rating small,
    .sticky-card-rating .text-muted {
        font-size: var(--fs-xs);
        line-height: 1.3;
    }
    @media (max-width: 340px) {
        .sticky-card-summary {
            grid-template-columns: minmax(0, 1fr);
        }
        .sticky-card-rating {
            justify-self: end;
        }
    }
    .collection-grid {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.45rem;
        margin-bottom: 0.5rem;
        flex-wrap: nowrap;
        font-size: var(--fs-sm);
    }
    .collection-grid-single {
        justify-content: flex-start;
    }
    .collection-grid-right {
        justify-content: center;
    }
    .collection-grid:last-child {
        margin-bottom: 0;
    }
    .collection-action {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        flex: 1 1 auto;
        min-width: 0;
    }
    .collection-action .collection-label {
        margin: 0;
        font-weight: 600;
        color: var(--action);
        white-space: nowrap;
        font-size: var(--fs-sm);
    }
    .sticky-biz-card .biz-card-heart-btn {
        position: static !important;
        top: auto !important;
        right: auto !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
    .sticky-biz-card .collection-link {
        font-size: var(--fs-sm) !important;
        font-weight: 600 !important;
        text-transform: none !important;
    }
    /* Desktop sticky card (.sbc). Sizes come from the 340px-wide design and scale with
       the column width: --u = 1 design px. Hover states come from the rules above / brand.css. */
    #bizSidebarCol > .sticky-biz-card {
        container-type: inline-size;
    }
    #bizSidebarCol .sticky-card-special-banner,
    #bizSidebarCol .sbc {
        --u: calc(100cqw / 340);
    }
    #bizSidebarCol .sticky-card-special-banner {
        font-size: calc(12 * var(--u));
        line-height: calc(17 * var(--u));
        padding: calc(8 * var(--u)) calc(16 * var(--u));
        gap: calc(8 * var(--u));
        border-radius: calc(16 * var(--u)) calc(16 * var(--u)) 0 0;
    }
    #bizSidebarCol .sticky-card-special-banner i {
        font-size: calc(11 * var(--u));
        margin: calc(3 * var(--u)) 0 0 !important;
    }
    .sticky-biz-card .card.sbc {
        border: 1px solid var(--border-subtle) !important;
        border-radius: calc(16 * var(--u));
        overflow: hidden;
    }
    .sticky-biz-card .card.sbc.has-special-banner {
        border-radius: 0 0 calc(16 * var(--u)) calc(16 * var(--u));
    }
    .sticky-biz-card .sbc-main {
        padding: calc(16 * var(--u));
    }
    .sbc-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: calc(12 * var(--u));
        margin-bottom: calc(16 * var(--u));
    }
    .sticky-biz-card .sbc-title {
        font-size: calc(19 * var(--u));
        font-weight: 700;
        line-height: calc(24 * var(--u));
        color: var(--text-default);
        margin: 0;
        min-width: 0;
    }
    .sbc-rating {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: calc(4 * var(--u));
    }
    .sbc-rating-score {
        display: flex;
        align-items: center;
        gap: calc(8 * var(--u));
        white-space: nowrap;
    }
    .sbc-rating-label {
        color: var(--action);
        font-weight: 700;
        font-size: calc(15 * var(--u));
        line-height: 1;
    }
    .sbc-rating-value {
        background: var(--action);
        color: var(--text-inverted);
        font-weight: 700;
        font-size: calc(16 * var(--u));
        line-height: calc(17 * var(--u));
        padding: calc(6 * var(--u)) calc(7 * var(--u));
        /* Same speech-bubble shape as .myclevan-score-value on directory cards (brand.css) */
        border-radius: calc(4 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) 0;
    }
    .sbc-rating-count {
        color: var(--action);
        font-size: calc(12 * var(--u));
        line-height: calc(15 * var(--u));
        font-weight: 600;
        text-decoration: underline;
    }
    .sbc-no-reviews {
        flex-shrink: 0;
        color: var(--text-subtle);
        font-size: calc(12 * var(--u));
    }
    .sbc-cats {
        margin: 0 0 calc(20 * var(--u));
        font-size: calc(14 * var(--u));
        line-height: calc(22.5 * var(--u));
    }
    .sbc-cats > div {
        display: flex;
        justify-content: space-between;
        gap: calc(8 * var(--u));
    }
    .sbc-cats dt {
        font-weight: 400;
        color: var(--text-subtle);
    }
    .sbc-cats dd {
        margin: 0;
        font-weight: 700;
        color: var(--text-default);
    }
    .sbc-highlights {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0 0 calc(20 * var(--u));
        gap: calc(10 * var(--u));
    }
    .sbc-highlights li {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(6 * var(--u));
        text-align: center;
        font-size: calc(12 * var(--u));
        font-weight: 700;
        line-height: 1.3;
        color: var(--text-default);
    }
    .sbc-highlights i {
        color: var(--action);
        font-size: calc(16 * var(--u));
        line-height: 1;
    }
    .sbc-actions {
        display: flex;
        align-items: center;
        gap: calc(8 * var(--u));
    }
    .sticky-biz-card .sbc-enquiry {
        flex: 1 1 auto;
        min-width: 0;
        height: calc(46 * var(--u));
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: calc(8 * var(--u));
        padding: 0 calc(12 * var(--u));
        border: 0;
        border-radius: var(--radius-max);
        background: var(--whatsapp);
        color: var(--text-inverted);
        font-size: calc(16 * var(--u)) !important;
        font-weight: 700;
        white-space: nowrap;
    }
    /* Hover only deepens the green, same as mc-btn--whatsapp */
    @media (hover: hover) {
    .sticky-biz-card .sbc-enquiry:hover {
        background: var(--whatsapp-hover);
        color: var(--text-inverted) !important;
    }
}
    .sticky-biz-card .sbc-actions .biz-card-heart-btn {
        width: calc(46 * var(--u)) !important;
        height: calc(46 * var(--u)) !important;
        font-size: calc(17 * var(--u));
        text-decoration: none;
    }
    .sbc-view-collection {
        text-align: right;
        margin-top: calc(6 * var(--u));
        line-height: calc(17 * var(--u));
    }
    .sticky-biz-card .sbc-view-collection .collection-link {
        color: var(--action) !important;
        font-size: calc(12 * var(--u)) !important;
    }
    .sbc-view-collection .collection-link i {
        display: inline-block;
        transition: transform 0.3s ease;
    }
    .sbc-view-collection .collection-link:focus-visible i {
        transform: translateX(calc(4 * var(--u)));
    }
    @media (hover: hover) {
    .sbc-view-collection .collection-link:hover i {
        transform: translateX(calc(4 * var(--u)));
    }
}
    @media (prefers-reduced-motion: reduce) {
        .sbc-view-collection .collection-link i { transition: none; }
    }
    .sbc-footer {
        display: flex;
        align-items: center;
        background: var(--background-subtle);
        border-top: 1px solid var(--border-subtle);
        padding: calc(14 * var(--u)) 0;
        line-height: calc(17 * var(--u));
    }
    .sbc-footer > * {
        flex: 1 1 0;
        min-width: 0;
        text-align: center;
    }
    .sbc-footer > * + * {
        border-left: 1px solid var(--border-divider) !important;
        border-radius: 0;
    }
    .sticky-biz-card .sbc-footer .collection-link {
        color: var(--text-subtle) !important;
        font-size: calc(12 * var(--u)) !important;
        line-height: calc(17 * var(--u));
    }
    .sbc-footer .collection-link i {
        margin-right: calc(8 * var(--u)) !important;
    }
    @media (hover: hover) {
    .sticky-biz-card .sbc-footer .collection-link:hover {
        color: var(--action) !important;
    }
}
    /* Action links (I'm interested, Suggest an edit, View Collection, Compare): black, pink on hover */
    .collection-link {
        color: var(--text-default) !important;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        font-size: var(--fs-sm);
        line-height: 1.25;
    }
    .collection-link-button {
        background: none;
        border: 0;
        padding: 0;
        text-align: left;
        appearance: none;
        font-family: inherit;
        cursor: pointer;
    }
    @media (hover: hover) {
    .collection-link:hover,
    .biz-map-open-link:hover {
        color: var(--action) !important;
    }
}
    @media (hover: hover) {
    .biz-map-open-link:hover {
        text-decoration: underline;
    }
}
    .biz-map-open-link {
        color: var(--text-default);
    }
    .collection-link-button:focus-visible,
    .inline-claim-link:focus-visible {
        text-decoration: underline;
        outline: none;
    }
    .collection-link i {
        margin-right: 0.35rem;
        font-size: var(--fs-sm);
    }
    @media (hover: hover) {
    .inline-claim-link:hover {
        text-decoration: underline;
    }
}
    .rating-stars {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .rating-stars i {
        color: var(--brand);
        font-size: var(--fs-sm);
    }
    .review-metric {
        background: var(--brand-subtle);
        border-radius: 12px;
        padding: 12px;
        height: 100%;
    }
    .review-metric .label {
        font-size: var(--fs-xs);
        text-transform: none;
        color: var(--text-subtle);
        display: block;
        margin-bottom: 4px;
    }
    .review-metric .value {
        font-weight: 600;
    }
    .vendor-biz-image {
        height: 160px;
        object-fit: cover;
        border-radius: 12px;
        width: 100%;
    }
    .info-pill {
        background: var(--brand-subtle);
        border-radius: 12px;
        padding: 16px;
        height: 100%;
    }
    .comparison-thumb {
        width: 72px;
        height: 72px;
        object-fit: cover;
        border-radius: 12px;
        background: var(--brand-subtle);
    }
    .review-tab-nav {
        margin: 0;
        padding: 0 1rem;
    }
    .review-tab-nav .nav-link {
        border: none;
        border-bottom: 3px solid var(--border-default);
        padding: 0.75rem 1rem;
        background: #fff;
        color: var(--text-subtle);
        border-radius: 0;
        transition: all 0.3s ease;
    }
    .review-tab-nav .nav-link.active {
        color: var(--text-default);
        border-bottom-color: var(--brand);
        background: #fff;
    }
    @media (hover: hover) {
    .review-tab-nav .nav-link:hover:not(.active) {
        color: var(--text-default);
        border-bottom-color: var(--border-default);
    }
}
    .review-card {
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
    .review-card .review-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    }
    .review-card .d-flex.align-items-start {
        gap: 0.75rem;
    }
    .review-card h6 {
        font-size: var(--fs-sm);
        margin-bottom: 0.125rem;
        font-weight: 600;
    }
    .review-card small {
        font-size: var(--fs-xs);
    }
    .review-card p {
        font-size: var(--fs-sm);
        line-height: 1.5;
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    /* Rating summary row — Agoda-style flat layout */
    .review-summary-row {
        display: flex;
        align-items: stretch;
        gap: 0;
    }
    .review-summary-score {
        flex: 0 0 200px;
        padding-left: 1rem;
        padding-right: 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .review-summary-categories {
        flex: 1;
        padding: 0 1.5rem;
        border-right: 1px solid var(--border-default);
    }
    .review-summary-filter {
        flex: 0 0 220px;
        padding-left: 1.5rem;
        display: flex;
        flex-direction: column;
    }

    /* Stacked score display inside review-summary-score */
    .review-score-number {
        display: flex;
        align-items: baseline;
        gap: 0.15rem;
        line-height: 1;
        margin-bottom: 0.25rem;
    }
    .review-score-value {
        font-size: 2.6rem;
        font-weight: 700;
        color: var(--action);
        line-height: 1;
    }
    .review-score-scale {
        font-size: 1rem;
        font-weight: 400;
        color: var(--text-subtle);
        line-height: 1;
    }
    .review-score-label {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--action);
        line-height: 1.2;
        margin-bottom: 0.25rem;
    }
    .review-verified-text {
        font-size: 0.8rem;
        color: var(--text-subtle);
    }

    /* All Reviews tab: each source's average converted to /10 */
    .review-source-breakdown {
        flex: 1;
        list-style: none;
        margin: 0;
        padding: 0 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }
    .review-source-breakdown li {
        display: grid;
        grid-template-columns: minmax(6rem, auto) auto 1fr;
        align-items: baseline;
        gap: 0.75rem;
        padding-bottom: 0.6rem;
        border-bottom: 1px solid var(--border-subtle);
    }
    .review-source-breakdown li:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    .review-source-name {
        font-weight: 600;
        color: var(--text-default);
    }
    .review-source-score {
        font-weight: 700;
        color: var(--action);
    }
    /* All Reviews tab mixes card layouts from every source; one even divider + rhythm keeps them distinct */
    .review-all-item {
        padding-bottom: 1rem;
    }
    /* Divider above every visible item except the first visible one (works after sorting/paging) */
    .review-all-item:not(.d-none) ~ .review-all-item {
        padding-top: 1rem;
        border-top: 1px solid var(--border-divider);
    }
    .review-all-item > .review-card {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    /* Google / external 5-star ratings use the familiar Google star yellow */
    .review-stars {
        color: #fbbc04;
    }

    /* "Source: Google" under the reviewer's name: quiet and smaller, so it reads as metadata */
    .review-all-source {
        font-size: 0.75rem;
        font-weight: 400;
        color: var(--text-subtle);
    }
    .review-all-source strong {
        font-weight: 600;
    }
    .review-all-source.is-myclevan strong {
        color: var(--action);
    }
    .review-source-meta {
        font-size: 0.8rem;
        font-weight: 400;
        color: var(--text-subtle);
    }
    @media (max-width: 767.98px) {
        .review-source-breakdown {
            padding: 0;
        }
    }

    .review-rating-item .d-flex.justify-content-between {
        gap: 0.5rem;
    }
    .review-rating-item .review-rating-label {
        flex: 1;
        min-width: 0;
        white-space: normal;
        word-break: break-word;
    }
    .review-rating-item .review-rating-value {
        flex-shrink: 0;
    }
    .review-rating-progress-full {
        width: 100%;
        height: 4px;
        border-radius: 2px;
    }

    /* Rating filter panel (Agoda-style right column) */
    .review-rating-filter-title {
        font-size: 0.9rem;
        color: var(--text-default);
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .review-rating-filter-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.3rem 0;
        text-decoration: none;
        color: var(--text-default);
        font-size: 0.82rem;
        cursor: pointer;
        transition: color 0.15s;
    }
    @media (hover: hover) {
    .review-rating-filter-item:hover {
        color: var(--action);
    }
}
    .review-rating-filter-item.active {
        color: var(--action);
        font-weight: 600;
    }
    .review-rating-filter-checkbox {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 14px;
        border: 1.5px solid var(--border-default);
        border-radius: 2px;
        flex-shrink: 0;
        font-size: 0.55rem;
        color: #fff;
        background: #fff;
    }
    .review-rating-filter-checkbox.checked {
        background: var(--action);
        border-color: var(--brand);
    }
    .review-rating-filter-label {
        flex: 1;
        min-width: 0;
    }
    .review-rating-filter-count {
        color: var(--text-subtle);
        font-size: 0.75rem;
        white-space: nowrap;
    }
    /* Rating panel's own reset: clears the rating ticks only */
    .review-rating-filter-clear {
        display: inline-block;
        margin-top: 0.5rem;
        font-size: 0.75rem;
        color: var(--action);
        text-decoration: none;
        cursor: pointer;
    }
    .review-rating-filter-clear:focus-visible {
        text-decoration: underline;
    }
    @media (hover: hover) {
    .review-rating-filter-clear:hover {
        text-decoration: underline;
    }
}

    /* Agoda-style review list controls: clear-all link under the chips, right-aligned sort, centred pager */
    .review-clear-filters {
        display: inline-block;
        margin-top: 0.5rem;
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--action);
        text-decoration: none;
    }
    .review-clear-filters:focus-visible {
        color: var(--action-hover);
        text-decoration: underline;
    }
    @media (hover: hover) {
    .review-clear-filters:hover {
        color: var(--action-hover);
        text-decoration: underline;
    }
}

    .review-list-controls {
        scroll-margin-top: 140px; /* clear the sticky navbar + section tabs */
    }

    .review-sort-row {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 1rem;
    }
    .review-sort-container {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .review-sort-label {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        color: var(--text-strong);
        white-space: nowrap;
    }
    /* Pill-shaped select matching .review-keyword-pill; custom chevron replaces the native arrow */
    .review-sort-select {
        appearance: none;
        padding: 0.35rem 2.25rem 0.35rem 1rem;
        font-size: 0.85rem;
        line-height: 1.4;
        color: var(--text-default);
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235e6b82' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0.85rem center / 12px;
        border: 1px solid var(--border-default);
        border-radius: 50rem;
        cursor: pointer;
        transition: border-color 0.15s ease, color 0.15s ease;
    }
    @media (hover: hover) {
    .review-sort-select:hover {
        border-color: var(--brand);
        color: var(--action);
    }
}
    .review-sort-select:focus-visible {
        outline: none;
        border-color: var(--focus-border);
        box-shadow: 0 0 0 3px rgba(var(--focus-rgb), 0.15);
    }

    .review-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 1.25rem;
    }
    .review-pagination-bottom {
        margin-top: 1.5rem;
    }
    .review-page-link,
    .review-page-arrow,
    .review-page-gap {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 34px;
        height: 34px;
        padding: 0 0.25rem;
        font-size: 18px;
        font-weight: 600;
        color: var(--text-subtle);
        text-decoration: none;
        border: 2px solid transparent;
        border-radius: 6px;
    }
    .review-page-link:focus-visible {
        color: var(--action);
        background: var(--action-hover-wash);
    }
    @media (hover: hover) {
    .review-page-link:hover {
        color: var(--action);
        background: var(--action-hover-wash);
    }
}
    .review-page-link.is-current {
        color: var(--action);
        border-color: var(--action);
    }
    .review-page-arrow {
        font-size: 14px;
        color: var(--action);
    }
    /* Client-side pagers (All Reviews tab) render buttons instead of links */
    button.review-page-link,
    button.review-page-arrow {
        background: transparent;
        cursor: pointer;
    }
    @media (hover: hover) {
    .review-page-arrow:hover {
        color: var(--action-hover);
    }
}
    .review-page-arrow.is-disabled {
        color: var(--text-disabled);
    }
    .review-page-gap {
        min-width: 24px;
        color: var(--action);
    }

    @media (max-width: 767.98px) {
        .review-summary-row {
            flex-direction: column;
            gap: 1rem;
        }
        .review-summary-score {
            flex: none;
            padding-right: 0;
            border-right: none;
            border-bottom: 1px solid var(--border-default);
            padding-bottom: 1rem;
        }
        .review-summary-categories {
            padding: 0;
            border-right: none;
            border-bottom: 1px solid var(--border-default);
            padding-bottom: 1rem;
        }
        .review-summary-filter {
            flex: none;
            padding-left: 0;
        }
    }

    /* Reply styles - smaller than reviews */
    .review-replies-container {
        margin: 0.75rem 1.5rem 0;
        padding: 12px 16px;
        border-radius: 8px;
        background: var(--background-subtle);
    }
    
    .review-reply-item {
        font-size: var(--fs-sm);
        margin-bottom: 0.5rem;
    }
    
    .review-reply-item img {
        width: 30px !important;
        height: 30px !important;
    }
    
    .review-reply-item strong {
        font-size: var(--fs-xs);
    }
    
    .review-reply-item small {
        font-size: var(--fs-xs);
    }
    
    .review-reply-item p {
        font-size: var(--fs-xs);
        line-height: 1.4;
        margin-bottom: 0.25rem;
    }
    
    .reply-message-input {
        font-size: var(--fs-sm);
    }
    
    .review-reply-form {
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border-default);
    }
    
    .review-reply-form .input-group {
        max-width: 500px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        border-radius: 20px;
        overflow: hidden;
        background: white;
    }
    
    .review-reply-form .form-control {
        border: 1px solid var(--border-default);
        border-right: none;
        border-radius: 20px 0 0 20px;
        padding: 6px 12px;
        font-size: var(--fs-sm);
    }
    
    .review-reply-form .form-control:focus {
        border-color: var(--focus-border);
        box-shadow: none;
    }
    
    .review-reply-form .btn {
        border-radius: 0 20px 20px 0;
        border-left: none;
        padding: 6px 14px;
    }
    
    .review-replies-list {
        margin-top: 12px;
        max-height: 300px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* No reply form above it: the container's padding is gap enough */
    .review-replies-list:first-child {
        margin-top: 0;
    }

    .reply-form-container {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--border-default);
    }
    
    .reply-form-container .input-group {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        border-radius: 20px;
        overflow: hidden;
        background: white;
    }
    
    .reply-form-container .form-control {
        border: 1px solid var(--border-default);
        border-right: none;
        border-radius: 20px 0 0 20px;
        padding: 6px 12px;
        font-size: var(--fs-sm);
    }
    
    .reply-form-container .form-control:focus {
        border-color: var(--focus-border);
        box-shadow: none;
    }
    
    .reply-form-container .btn {
        border-radius: 0 20px 20px 0;
        border-left: none;
        padding: 6px 14px;
    }
    
    .nested-replies-container {
        margin-top: 0;
        margin-left: 0;
        padding-top: 8px;
    }

    .nested-replies-container:empty {
        padding-top: 0;
    }

    /* First level only: indent under the root review-reply-item */
    .review-replies-list > .review-reply-item > .nested-replies-container {
        margin-left: 20px;
    }

    /* All deeper levels: no additional indent */
    .review-replies-list > .review-reply-item > .nested-replies-container .nested-replies-container {
        margin-left: 0 !important;
        padding-top: 0;
    }

    /* Remove bottom border and padding for nested reply items */
    .nested-replies-container .review-reply-item {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 12px;
    }
    
    .nested-replies-container .review-reply-item:last-child {
        margin-bottom: 0;
    }
    
    .show-more-replies-btn {
        transition: color 0.2s ease;
    }

    @media (hover: hover) {

    .show-more-replies-btn:hover {
        color: var(--action) !important;
        text-decoration: underline !important;
    }
}

    .show-more-review-replies-btn,
    .show-less-review-replies-btn,
    .show-all-nested-replies-btn,
    .show-more-nested-btn {
        transition: color 0.2s ease;
        text-decoration: none !important;
    }
    
    .review-overall-badge {
        cursor: pointer;
        text-decoration: none;
    }
    .review-rating-tag {
        display: inline-flex;
        align-items: baseline;
        gap: 2px;
        flex-shrink: 0;
        font-weight: 400;
    }
    .review-rating-tag .review-rating-value {
        color: var(--action);
        font-size: var(--fs-sm);
        font-weight: 400;
    }
    .review-rating-tag .review-rating-scale {
        color: var(--text-subtle);
        font-size: var(--fs-xs);
        font-weight: 400;
    }
    .review-rating-tag .review-rating-label-text {
        color: var(--action);
        font-size: var(--fs-xs);
        font-weight: 400;
    }
    /* ── "Show reviews that mention" keyword pills ──────────────── */
    .review-keywords-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .review-keyword-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.35rem 1rem;
        border: 1px solid var(--border-default);
        border-radius: 50rem;
        background: #fff;
        color: var(--text-default);
        font-size: 0.85rem;
        line-height: 1.4;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    }
    @media (hover: hover) {
    .review-keyword-pill:hover {
        border-color: var(--brand);
        color: var(--action);
    }
}
    .review-keyword-pill.active {
        border-color: var(--brand);
        background: var(--brand-subtle);
        color: var(--action);
        font-weight: 600;
    }
    .review-keyword-thumb {
        color: var(--success);
        font-size: 0.8rem;
    }
    .review-keyword-pill.active .review-keyword-thumb {
        color: var(--action);
    }
    .review-keyword-more {
        color: var(--action);
        font-weight: 500;
    }
    /* ── two-column review card ─────────────────────────────────── */
    .review-split-wrap {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
    }
    .review-left-panel {
        flex: 0 0 170px;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }
    .review-left-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 2px 6px rgba(0,0,0,0.12);
        margin-bottom: 0.15rem;
    }
    .review-left-username {
        font-size: var(--fs-sm);
        font-weight: 600;
        display: flex;
        align-items: baseline;
        gap: 0.35rem;
        flex-wrap: wrap;
    }
    .review-left-score {
        display: flex;
        align-items: baseline;
        gap: 0.3rem;
    }
    /* Only MyClevan scores open the sub-rating tooltip */
    .review-left-score.biz-review-tooltip-trigger {
        cursor: pointer;
    }
    .review-left-score-num {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--action);
        line-height: 1;
    }
    .review-left-score-label {
        font-size: 0.8rem;
        color: var(--action);
        font-weight: 500;
    }
    .review-right-card {
        flex: 1;
        min-width: 0;
        background: var(--background);
        border-radius: 8px;
        overflow: hidden;
    }
    .review-right-body {
        padding: 1rem 1.25rem;
    }
    .review-right-title {
        font-size: var(--fs-base, 0.875rem);
        font-weight: 700;
        margin-bottom: 0.5rem;
        line-height: 1.4;
    }
    .review-right-comment {
        font-size: var(--fs-sm);
        line-height: 1.6;
        margin-bottom: 0.5rem;
        color: var(--text-default);
    }
    .review-right-translate {
        font-size: var(--fs-xs);
        color: var(--text-subtle);
        text-decoration: none;
        display: inline-block;
        margin-bottom: 0.5rem;
    }
    @media (hover: hover) {
    .review-right-translate:hover {
        color: var(--action);
        text-decoration: underline;
    }
}
    .review-right-date-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin-top: 0.75rem;
        flex-wrap: wrap;
    }
    .review-right-date {
        font-size: var(--fs-xs);
        color: var(--text-subtle);
    }
    .review-right-actions {
        padding: 0.6rem 1.25rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .review-right-action-btns {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;
    }
    /* ── end two-column layout ──────────────────────────────────── */
    /* Helpful + report match the homepage review card (home.css .review-action-btn) */
    .review-reply-toggle,
    .review-helpful-btn,
    .review-helpful-link {
        display: inline-flex;
        align-items: center;
        background: none;
        border: none;
        border-radius: 4px;
        color: var(--text-default);
        font-size: var(--fs-xs);
        padding: 0.2rem 0.5rem;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.2s ease;
    }
    .review-reply-toggle i,
    .review-helpful-btn i,
    .review-helpful-link i {
        font-size: var(--fs-xs);
        color: #888;
    }
    @media (hover: hover) {
    /* Same as the review modal's share action (home.css .xn-action[data-xn-share]) */
    .review-reply-toggle:hover {
        color: #000;
        background: rgba(0, 0, 0, 0.06);
        border-radius: 999px;
    }
    .review-reply-toggle:hover i {
        color: #000;
    }
}
    @media (hover: hover) {
    .review-helpful-btn:hover,
    .review-helpful-link:hover,
    .review-helpful-btn:hover i,
    .review-helpful-link:hover i {
        color: var(--success);
    }
}
    @media (hover: hover) {
    .review-helpful-btn:hover,
    .review-helpful-link:hover {
        background: var(--success-subtle);
    }
}
    .review-helpful-btn.active,
    .review-helpful-btn.active i,
    .review-helpful-icon {
        color: var(--success);
    }
    .review-helpful-btn.active i {
        font-weight: 900; /* outline (far) -> solid once marked helpful */
    }
    .review-helpful-count {
        font-size: var(--fs-xs);
    }
    .content-report-btn {
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 4px;
        background: none;
        color: #aaa;
        transition: all 0.2s ease;
        padding: 0;
        flex-shrink: 0;
    }
    .content-report-btn.reported {
        background: #fdeceb;
        color: #c24b41;
    }
    @media (hover: hover) {
    .content-report-btn:hover {
        background: #fdeceb;
        color: #c24b41;
    }
}
    .content-report-btn i {
        font-size: 13px;
    }

    #reviewReportModal .modal-content {
        border: 0;
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0 24px 60px rgba(var(--brand-rgb), 0.18);
    }
    #reviewReportModal .modal-header {
        background: linear-gradient(135deg, #fff4f2 0%, #fff 100%);
        border-bottom: 1px solid rgba(194, 75, 65, 0.12);
    }
    #reviewReportModal textarea {
        min-height: 140px;
        resize: vertical;
    }
    .review-show-original-btn {
        font-size: var(--fs-xs);
        padding: 0.1rem 0.2rem;
    }
    .review-show-original-btn i {
        font-size: var(--fs-xs);
    }
    .external-review-show-original-btn {
        font-size: var(--fs-xs);
        padding: 0.1rem 0.2rem;
    }
    .external-review-show-original-btn i {
        font-size: var(--fs-xs);
    }
    .reply-show-original-btn {
        font-size: var(--fs-xs);
        padding: 0;
        margin-top: -0.5rem;
        display: block;
    }
    .reply-show-original-btn i {
        font-size: var(--fs-xs);
    }
    .review-media-thumbnail {
        width: 100px;
        height: 100px;
        cursor: pointer;
    }
    .review-media-image-trigger {
        object-fit: cover;
    }
    .review-media-video-trigger {
        position: relative;
        overflow: hidden;
        border-radius: 0.25rem;
    }
    .review-media-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
    }
    .review-media-play-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }
    .review-media-play-icon {
        font-size: var(--fs-xl);
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
    .review-rating-progress-sm {
        width: 40px;
        height: 4px;
    }
    .biz-page-content,
    .biz-layout-row,
    .biz-main-column {
        overflow: visible !important;
    }
    .biz-layout-row,
    .biz-main-column,
    .modal-media-container {
        position: relative;
    }
    .biz-back-link {
        justify-content: flex-start !important;
    }
    .biz-back-col {
        flex: 0 0 auto !important;
        margin-right: auto !important;
        margin-left: 0 !important;
    }
    #reviewLoading,
    #suggestEditFormContainer,
    .modal-photo-element,
    .modal-youtube-container {
        display: none;
    }
    .external-review-platform-badge {
        font-size: var(--fs-xs);
        padding: 0.2rem 0.4rem;
    }
    .suggest-edit-item-icon {
        width: 24px;
    }
    .modal-close-elevated {
        z-index: 30;
    }
    .modal-media-container {
        width: 100%;
        min-height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .modal-photo-element {
        max-width: 100%;
        max-height: 80vh;
        object-fit: contain;
    }
    .modal-youtube-container {
        width: 100%;
        max-width: 100%;
    }
    .modal-youtube-ratio {
        max-width: 100%;
        margin: 0 auto;
    }
    .modal-youtube-iframe {
        width: 100%;
        height: 100%;
    }
    .tooltip.review-rating-tooltip .tooltip-inner {
        max-width: 340px;
        padding: 0;
        border-radius: 12px;
        text-align: left;
        background: #fff;
        color: var(--text-default);
        box-shadow: 0 20px 45px rgba(var(--brand-rgb), 0.18);
    }
    .review-rating-tooltip-container {
        padding: 1rem 1.05rem;
    }
    .review-rating-tooltip-header {
        font-weight: 700;
        font-size: var(--fs-sm);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
        border-bottom: 1px solid rgba(var(--brand-rgb), 0.08);
        padding-bottom: 0.5rem;
    }
    .review-rating-tooltip-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem 1.1rem;
    }
    .review-rating-tooltip-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        font-size: var(--fs-sm);
    }
    .review-rating-tooltip-item .label {
        color: var(--text-subtle);
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-weight: 500;
    }
    .review-rating-tooltip-item .value {
        font-weight: 600;
        color: var(--action);
    }
    .review-rating-tooltip-footer {
        margin-top: 0.9rem;
        padding-top: 0.65rem;
        border-top: 1px solid rgba(var(--brand-rgb), 0.08);
        font-size: var(--fs-xs);
        color: var(--text-subtle);
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }
    @media (max-width: 991.98px) {
        /* Desktop sticky card - keep original behavior */
        .d-lg-block.sticky-biz-card {
            position: static;
            top: auto;
            max-width: none;
            max-height: none;
            margin-left: 0;
            margin-bottom: 1.5rem;
        }
        .d-lg-block.sticky-biz-card .card {
            overflow: visible;
        }
        .photo-carousel-image {
            aspect-ratio: 3/2;
        }
        .photo-carousel .carousel-control-prev,
        .photo-carousel .carousel-control-next {
            width: 2.75rem;
            height: 2.75rem;
        }
    }
    @media (max-width: 768px) {
        .photo-carousel-image {
            aspect-ratio: 16/9;
        }
        #modalPhotoPrev,
        #modalPhotoNext {
            width: 3rem;
            height: 3rem;
            font-size: 1.2rem;
        }
    }
    @media (max-width: 576px) {
        .photo-carousel-image {
            aspect-ratio: 4/3;
        }
        .modal-photo-counter {
            right: 0.75rem;
            bottom: 0.75rem;
        }
    }
    
    /* Prevent horizontal scroll on mobile */
    @media (max-width: 991.98px) {
        html, body {
            overflow-x: hidden !important;
            max-width: 100vw !important;
        }
        .container, .container-fluid {
            max-width: 100% !important;
            overflow-x: hidden !important;
            overflow-y: visible !important; /* Allow sticky to work */
        }
        .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
            overflow: visible !important; /* Allow sticky to work */
        }
        [class*="col-"] {
            padding-left: 0.5rem !important;
            padding-right: 0.5rem !important;
        }
        /* Page body only: the header/drawer logos have fixed heights; avatars keep their square box */
        .page-content img:not([class*="avatar"], .rounded-circle) {
            max-width: 100% !important;
            height: auto !important;
        }
        /* Prevent elements from causing overflow */
        .card-body,
        .card-header,
        section {
            max-width: 100% !important;
            overflow-x: hidden !important;
        }
        
        /* Ensure sticky container parent doesn't have overflow hidden */
        .col-xl-8.col-lg-7,
        .row.g-4 {
            overflow: visible !important;
        }
        /* Ensure no negative margins cause overflow */
        .row.g-2,
        .row.g-3,
        .row.g-4 {
            margin-left: -0.25rem !important;
            margin-right: -0.25rem !important;
        }
        /* Fix for Bootstrap gutters */
        .g-2 > *,
        .g-3 > *,
        .g-4 > * {
            padding-left: 0.25rem !important;
            padding-right: 0.25rem !important;
        }
    }
    
    /* Mobile-specific styles for compact design */
    @media (max-width: 991.98px) {
        /* Reduce top padding on mobile */
        .page-content {
            padding-top: 72px !important;
        }
        
        /* Make "About This School" section font smaller on mobile */
        /* Target the div that contains "about this school" text - it comes after key facts and before vendor info */
        #schoolInfoSection .card-body > div:not(.mb-3):not(.mt-4):not(.row) p,
        #schoolInfoSection .card-body > div:not(.mb-3):not(.mt-4):not(.row) ul,
        #schoolInfoSection .card-body > div:not(.mb-3):not(.mt-4):not(.row) li {
            font-size: 0.75rem !important;
            line-height: 1.4 !important;
        }
        
        /* More specific: target paragraphs and list items in about section */
        #schoolInfoSection .card-body p.text-muted.mb-0,
        #schoolInfoSection .card-body ul.mb-0 li,
        #schoolInfoSection .card-body ul.ps-3 li {
            font-size: 0.75rem !important;
            line-height: 1.4 !important;
        }
        
        /* Make all reply input boxes thinner on mobile - even thinner */
        .reply-message-input,
        .reply-message-input-nested,
        .review-reply-form .form-control,
        .reply-form-container .form-control {
            padding: 3px 8px !important;
            font-size: 0.75rem !important;
            min-height: 28px !important;
            height: 28px !important;
            line-height: 1.2 !important;
        }
        
        .review-reply-form .btn,
        .reply-form-container .btn {
            padding: 3px 10px !important;
            font-size: 0.75rem !important;
            min-height: 28px !important;
            height: 28px !important;
            line-height: 1.2 !important;
        }
        
        .review-reply-form .btn i,
        .reply-form-container .btn i {
            font-size: 0.7rem !important;
        }
        
        .review-reply-form .input-group,
        .reply-form-container .input-group {
            max-height: 28px !important;
        }
        
        /* Make show original button smaller on mobile */
        .review-show-original-btn,
        .external-review-show-original-btn,
        .reply-show-original-btn {
            font-size: 0.875rem !important;
            padding: 0.05rem 0.15rem !important;
        }
        
        .review-show-original-btn i,
        .external-review-show-original-btn i,
        .reply-show-original-btn i {
            font-size: 0.8125rem !important;
        }
        
        /* Make photo gallery container smaller on mobile */
        .photo-carousel-card.d-lg-none {
            max-height: 300px !important;
        }
        
        .photo-carousel-card.d-lg-none .card-body {
            padding: 0.5rem !important;
            max-height: 280px !important;
            overflow: hidden !important;
        }
        
        .photo-carousel-card.d-lg-none .photo-carousel {
            max-height: 280px !important;
            height: 280px !important;
        }
        
        .photo-carousel-card.d-lg-none .carousel-inner {
            max-height: 280px !important;
            height: 280px !important;
        }
        
        .photo-carousel-card.d-lg-none .carousel-item {
            max-height: 280px !important;
            height: 280px !important;
        }
        
        .photo-carousel-card.d-lg-none .photo-carousel-image {
            max-height: 280px !important;
            height: 280px !important;
            object-fit: cover !important;
        }
        
        .photo-carousel-card.d-lg-none .photo-gallery-header {
            padding: 0.5rem 0.75rem !important;
        }
        
        .photo-carousel-card.d-lg-none .photo-gallery-header h5 {
            font-size: 0.85rem !important;
            margin-bottom: 0 !important;
        }
        
        .photo-carousel-card.d-lg-none .photo-gallery-header i {
            font-size: 0.8rem !important;
        }
        
        .sticky-card-summary {
            grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
            column-gap: 0.5rem !important;
            row-gap: 0.25rem !important;
            margin-bottom: 0.45rem !important;
        }
        .sticky-card-rating {
            font-size: 0.8125rem !important;
        }
        .sticky-card-rating .text-warning i {
            font-size: 0.75rem !important;
        }
        .sticky-card-rating .fw-semibold {
            font-size: 0.8125rem !important;
        }
        .sticky-card-rating small,
        .sticky-card-rating .text-muted {
            font-size: 0.75rem !important;
        }
        .collection-grid {
            font-size: 0.8125rem !important;
            gap: 0.3rem !important;
            margin-bottom: 0.3rem !important;
            flex-wrap: wrap !important; /* Allow wrapping on small screens */
        }
        .collection-action {
            gap: 0.3rem !important;
        }
        .collection-label {
            font-size: 0.8125rem !important;
            white-space: normal !important;
        }
        .collection-link {
            font-size: 0.8125rem !important;
            white-space: normal !important; /* Allow text to wrap */
            word-break: break-word !important; /* Break long words if needed */
            min-width: 0 !important; /* Allow flex item to shrink below content size */
        }
        
        /* School information section - smaller fonts above key facts */
        #schoolInfoSection .card-body .row > div {
            margin-bottom: 0.5rem;
        }
        
        /* Force two-column layout for school info sections (except address, vision, mission, about, vendor) */
        #schoolInfoSection .card-body .row.g-3 > .col-6 {
            flex: 0 0 50% !important;
            max-width: 50% !important;
            width: 50% !important;
        }
        #schoolInfoSection .text-muted.small {
            font-size: 0.8125rem !important;
            margin-bottom: 0.15rem;
        }
        #schoolInfoSection .fw-semibold {
            font-size: 0.7rem !important;
        }
        #schoolInfoSection .mb-3 {
            margin-bottom: 0.75rem !important;
        }
        #schoolInfoSection .mb-2 {
            margin-bottom: 0.4rem !important;
        }
        #schoolInfoSection .list-unstyled li {
            font-size: 0.875rem !important;
        }
        
        /* Key facts - smaller and 2 columns */
        .key-fact-item {
            padding: 0.35rem !important;
        }
        .key-fact-label {
            font-size: 0.75rem !important;
            margin-bottom: 0.15rem;
        }
        .key-fact-value {
            font-size: 0.8125rem !important;
            line-height: 1.15;
            word-break: break-word;
        }
        
        /* Highlights and Facilities - smaller, 3 per row */
        #highlightsSection .row > div,
        #facilitiesSection .row > div {
            padding-left: 0.25rem !important;
            padding-right: 0.25rem !important;
        }
        .highlight-item, .facility-item {
            padding: 0.35rem !important;
            gap: 0.35rem !important;
        }
        .highlight-icon, .facility-icon {
            font-size: 0.7rem !important;
            min-width: 0.85rem;
        }
        .highlight-text, .facility-text {
            font-size: 0.8125rem !important;
            line-height: 1.2;
        }
        
        /* Compare schools - side by side, smaller, fix overflow */
        .comparison-card {
            padding: 0.4rem !important;
        }
        .comparison-thumb {
            width: 40px !important;
            height: 40px !important;
            flex-shrink: 0;
        }
        .comparison-card .d-flex.align-items-center {
            gap: 0.5rem !important;
            margin-bottom: 0.5rem !important;
        }
        .comparison-biz-name {
            font-size: 0.8125rem !important;
            line-height: 1.15;
            margin-bottom: 0.2rem !important;
            word-break: break-word;
            overflow-wrap: break-word;
        }
        .comparison-card .text-warning {
            font-size: 0.75rem !important;
        }
        .comparison-card .text-warning i {
            font-size: 0.75rem !important;
        }
        .comparison-card .d-flex.align-items-center.gap-2 {
            gap: 0.25rem !important;
        }
        .comparison-card .ms-1 {
            margin-left: 0.15rem !important;
            font-size: 0.75rem !important;
        }
        .comparison-card .small {
            font-size: 0.75rem !important;
        }
        .comparison-card .text-muted {
            font-size: 0.75rem !important;
        }
        .comparison-metric {
            padding: 0.3rem !important;
        }
        .comparison-metric-label {
            font-size: 0.75rem !important;
            margin-bottom: 0.1rem;
            line-height: 1.1;
            word-break: break-word;
        }
        .comparison-metric-value {
            font-size: 0.8125rem !important;
            line-height: 1.2;
        }
        
        /* Review section header - smaller */
        #fullReviewSection .card-header h5 {
            font-size: 0.75rem !important;
        }
        #fullReviewSection .card-header i {
            font-size: 0.7rem !important;
        }
        #fullReviewSection .btn-sm {
            font-size: 0.875rem !important;
            padding: 0.2rem 0.5rem !important;
        }
        
        /* Review tabs - smaller */
        .review-tab-nav .nav-link {
            font-size: 0.7rem !important;
            padding: 0.5rem 0.75rem !important;
        }
        .review-tab-nav .nav-link i {
            font-size: 0.875rem !important;
        }
        
        /* Review section - smaller ratings */
        .review-rating-display {
            font-size: 1.5rem !important;
        }
        .review-rating-display .myclevan-score {
            --myclevan-score-size: 1.5rem;
        }
        .review-star-icon {
            font-size: 0.75rem !important;
        }
        .review-verified-text {
            font-size: 0.75rem !important;
        }
        .review-verified-text i {
            font-size: 0.75rem !important;
        }
        .review-rating-item {
            padding: 0.25rem !important;
        }
        .review-rating-icon {
            font-size: 0.8125rem !important;
        }
        .review-rating-label {
            font-size: 0.75rem !important;
        }
        .review-rating-value {
            font-size: 0.8125rem !important;
        }
        .review-rating-progress {
            width: 25px !important;
            height: 2.5px !important;
        }
        
        /* Review keywords - compact pills */
        .review-keywords-title {
            font-size: 0.75rem !important;
            margin-bottom: 0.25rem !important;
        }
        .review-keywords-container {
            gap: 0.35rem !important;
        }
        .review-keyword-pill {
            font-size: 0.875rem !important;
            padding: 0.25rem 0.6rem !important;
        }
        .review-keyword-thumb {
            font-size: 0.8125rem !important;
        }
        
        .review-rating-filter-title {
            font-size: 0.7rem !important;
        }
        .review-rating-filter-item {
            font-size: 0.8125rem !important;
            padding: 0.2rem 0 !important;
        }
        .review-rating-filter-count {
            font-size: 0.75rem !important;
        }
        
        /* Photo gallery header - smaller */
        .photo-gallery-header {
            padding: 0.75rem 1rem !important;
        }
        .photo-gallery-header h5 {
            font-size: 0.8rem !important;
        }
        .photo-gallery-header i {
            font-size: 0.9rem !important;
            padding: 0.35rem !important;
        }
        
        /* User review section - smaller */
        .review-card {
            padding-bottom: 0.75rem !important;
            margin-bottom: 0.75rem !important;
        }
        .review-split-wrap {
            flex-direction: column;
            gap: 0.5rem;
        }
        .review-left-panel {
            flex: none;
            width: 100%;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem 0.75rem;
        }
        .review-left-avatar {
            width: 36px !important;
            height: 36px !important;
            margin-bottom: 0;
        }
        .review-left-score-num {
            font-size: 1.2rem !important;
        }
        .review-replies-container {
            margin-inline: 0;
        }
        .review-right-body {
            padding: 0.75rem 1rem !important;
        }
        .review-right-actions {
            padding: 0.5rem 1rem !important;
            flex-wrap: wrap;
            gap: 0.4rem;
        }
        .review-avatar {
            width: 28px !important;
            height: 28px !important;
        }
        .review-card .d-flex.align-items-start {
            gap: 0.5rem !important;
        }
        .review-card h6 {
            font-size: 0.875rem !important;
            margin-bottom: 0.15rem !important;
        }
        .review-card small {
            font-size: 0.75rem !important;
        }
        .review-overall-badge .review-rating-value {
            font-size: 16px;
        }
        .review-helpful-count {
            font-size: 0.875rem !important;
        }
        .review-card p {
            font-size: 0.875rem !important;
            line-height: 1.4;
            margin-top: 0.5rem !important;
            margin-bottom: 0.5rem !important;
        }
        .review-photos img {
            width: 80px !important;
            height: 80px !important;
        }
        .review-helpful-btn,
        .review-helpful-link {
            font-size: 0.75rem !important;
            padding: 0.15rem 0.4rem !important;
        }
        .review-helpful-btn i,
        .review-helpful-link i {
            font-size: 0.75rem !important;
        }
        .content-report-btn i {
            font-size: 0.8125rem !important;
        }
        
        /* Back button - smaller and ensure left alignment */
        .page-content .row.align-items-center {
            justify-content: flex-start !important;
            text-align: left !important;
        }
        .page-content .row.align-items-center .col-auto {
            flex: 0 0 auto !important;
            width: auto !important;
            margin-right: auto !important;
            margin-left: 0 !important;
        }
        .back-link {
            font-size: 0.7rem !important;
            justify-content: flex-start !important;
            text-align: left !important;
        }
        .back-link i {
            font-size: 0.875rem !important;
        }
        .biz-breadcrumb-stack {
            gap: 0.75rem;
            align-items: flex-start;
        }
        .biz-breadcrumb-list {
            display: flex;
            width: 100%;
            padding: 0;
            gap: 0.45rem 0.25rem;
        }
        .biz-breadcrumb-entry.is-current {
            flex-basis: 100%;
        }
        .biz-back-link {
            font-size: 0.78rem !important;
        }
        .biz-back-link-icon {
            width: 1.75rem;
            height: 1.75rem;
        }
        
        /* You might like section - smaller */
        #recommendationsSection .vendor-biz-image {
            height: 120px !important;
        }
        #recommendationsSection h6 {
            font-size: 0.875rem !important;
        }
        #recommendationsSection .text-warning i {
            font-size: 0.8125rem !important;
        }
        #recommendationsSection .small {
            font-size: 0.75rem !important;
        }
        #recommendationsSection .text-muted {
            font-size: 0.75rem !important;
        }
        #recommendationsSection .p-3 {
            padding: 0.5rem !important;
        }
        
        /* General mobile shrinking - coordinated sizing */
        .card-header h5 {
            font-size: 0.75rem !important;
        }
        .card-header i {
            font-size: 0.7rem !important;
        }
        .page-title {
            font-size: 1rem !important;
        }
        .badge {
            font-size: 0.8125rem !important;
            padding: 0.2rem 0.4rem !important;
        }
        .card-body {
            padding: 0.75rem !important;
        }
        .card-header {
            padding: 0.75rem !important;
        }
        .mb-4 {
            margin-bottom: 0.75rem !important;
        }
        .mb-3 {
            margin-bottom: 0.5rem !important;
        }
        
        /* Fix for Samsung Galaxy S8 and similar small screens (360px width) */
        @media (max-width: 375px) {
            .collection-grid {
                flex-wrap: wrap !important;
            }
            .collection-link {
                white-space: normal !important;
                word-break: break-word !important;
                font-size: 0.8125rem !important;
                min-width: 0 !important;
            }
        }
    }

/* AI Review Summary Styles */
#aiReviewSummarySection {
    background: var(--background);
    border: 1px solid var(--border-default);
}

.ai-summary-content {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    min-height: 150px;
}

.ai-summary-positive,
.ai-summary-negative {
    padding: 1rem;
    background: var(--background);
    border-radius: 6px;
    border-left: 3px solid;
}

.ai-summary-positive {
    border-left-color: var(--success);
    background: var(--success-subtle);
}

.ai-summary-negative {
    border-left-color: var(--urgency);
    background: #fff5f5;
}

.ai-summary-positive p,
.ai-summary-negative p {
    line-height: 1.6;
    color: var(--text-default);
    margin: 0;
}

/* Desktop: Normal size */
.ai-summary-icon {
    font-size: var(--fs-base);
}

.ai-summary-text {
    font-size: var(--fs-sm);
}

/* Mobile: Smaller size */
@media (max-width: 991.98px) {
    .ai-summary-icon {
        font-size: 0.9rem !important;
    }
    
    .ai-summary-text {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }
    
    .ai-summary-positive,
    .ai-summary-negative {
        padding: 0.75rem !important;
    }
    
    .ai-summary-content {
        padding: 1rem !important;
    }
}

#aiReviewSummarySection .btn-group .btn.active {
    background-color: var(--action);
    color: white;
    border-color: var(--brand);
}

/* Remove the bottom border on the section immediately above the AI summary */
.card-body:has(+ #bizAiReviewSummarySection) {
    border-bottom: 0 !important;
}

/* Business page AI summary - Agoda "What guests liked" box: topic bullets in two columns */
.biz-ai-summary {
    --ai-text: var(--text-default);
    --ai-muted: var(--text-subtle);
    border: 1px solid var(--ai);
    border-radius: 8px;
    padding: 16px;
    color: var(--ai-text);
}

.biz-ai-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 12px;
}

.biz-ai-summary-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.27;
    color: var(--ai-text);
}

.biz-ai-summary-icon {
    flex-shrink: 0;
    color: var(--ai);
}

.biz-ai-summary-tag {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--ai-muted);
}

/* Column-first like Agoda: top half of the topics on the left, the rest on the right */
.biz-ai-aspects {
    columns: 2;
    column-gap: 24px;
}

.biz-ai-aspect {
    position: relative;
    margin: 0 0 6px;
    padding-left: 12px;
    font-size: 14px;
    line-height: 1.3;
    break-inside: avoid;
}

.biz-ai-aspect::before {
    content: "•";
    position: absolute;
    left: 0;
}

.biz-ai-aspect-topic {
    font-weight: 600;
}

.biz-ai-aspect-mentions {
    color: var(--ai-muted);
    white-space: nowrap; /* "(3 mentions)" wraps as one unit, never split across lines */
}

.biz-ai-summary-status {
    padding: 0.5rem 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--ai-muted);
}

@media (max-width: 767.98px) {
    .biz-ai-summary {
        padding: 16px;
    }

    .biz-ai-summary-head {
        margin-bottom: 12px;
    }

    .biz-ai-aspects {
        columns: 1;
    }
}

/* Mobile: Smaller no reviews message */
@media (max-width: 991.98px) {
    .no-reviews-message {
        padding: 2rem 1rem !important;
    }
    
    .no-reviews-icon {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }
    
    .no-reviews-title {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .no-reviews-text {
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
    }
    
    .no-reviews-btn {
        font-size: 0.85rem !important;
        padding: 0.4rem 0.8rem !important;
    }
    
    .no-reviews-btn i {
        font-size: 0.75rem !important;
    }
}

@media (max-width: 767.98px) {
    .biz-breadcrumb-card {
        display: none !important;
    }
}

/* ===== Business Detail Section Containers ===== */
.biz-section {
    border: 1px solid var(--border-default) !important;
    box-shadow: none !important;
    border-radius: 0.5rem !important;
    overflow: visible !important;
}

@media (hover: hover) {

.biz-section:hover {
    box-shadow: none !important;
    transform: none !important;
}
}

.biz-overview-head.has-logo {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 2rem;
    align-items: start;
}

/* Name flows inline so the score/badge follow its last word instead of a new row */
.biz-overview-title {
    margin-bottom: 0.5rem;
}

.biz-overview-title h2 {
    display: inline;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.biz-overview-title .myclevan-score,
.biz-overview-title .rec-preferred-badge {
    vertical-align: middle;
    white-space: nowrap;
}

.biz-overview-title .myclevan-score {
    display: inline-flex;
}

.biz-overview-title .rec-preferred-badge {
    margin-left: 0.35rem;
}

/* One fixed circle for every logo, matching the directory card's no-photo logo */
.biz-overview-logo {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    align-self: center;
    padding: 12px;
    object-fit: contain;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
}

.biz-overview-ident {
    min-width: 0;
}

/* Fact / highlight tags (listing-card .mc-tag): fill the row, wrap whole tags */
.biz-tags {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.biz-tags .mc-tag {
    margin: 0 0.25rem 0.25rem 0;
    height: auto;
    min-height: 22px;
    white-space: normal; /* only breaks inside when too long even for a row of its own (long special text) */
}

.biz-tags .mc-tag i {
    margin-right: 0.25rem;
    font-size: 10px;
}

.biz-tags .mc-tag svg {
    width: 12px;
    height: 12px;
    margin-right: 0.25rem;
    flex-shrink: 0;
    fill: currentColor;
}

/* Dim the reviews pane while a filter/sort result is being fetched */
#platformReviewsPane.is-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity var(--duration-fast, 150ms);
}

/* Six sub-ratings as their own card between Overview and Highlights (3 x 2 on phones) */
.biz-overview-ratings {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    overflow: hidden;
}

/* Wine text link; its tint shows behind the text on hover (View all, see map) */
.biz-text-link {
    padding: 2px 6px;
    border-radius: var(--radius-4, 4px);
    color: var(--action);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s;
}

@media (hover: hover) {
    .biz-text-link:hover { background: var(--brand-subtle); color: var(--action); }
}

.biz-text-link:focus-visible { background: var(--brand-subtle); }

/* Own row above the six scores: overall score + label + count (left), View all (right) */
.biz-overview-ratings-head {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 14px 16px 0 24px;
}

/* One baseline row: 8.5  Excellent  7 reviews */
.biz-overview-ratings-summary,
.biz-overview-ratings-summary > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.5rem;
}

.biz-overview-ratings-score {
    color: var(--action);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.biz-overview-ratings-label {
    color: var(--action);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
}

.biz-overview-ratings-count {
    color: var(--text-subtle);
    font-size: 0.875rem;
}

.biz-overview-ratings-all {
    font-size: 0.8125rem;
}

.biz-overview-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    text-align: center;
}

.biz-overview-rating-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.biz-overview-rating-bar {
    width: 70%;
    height: 4px;
    border-radius: 2px;
}

.biz-overview-rating-label {
    font-size: 0.75rem;
    line-height: 1.25;
    color: var(--bs-secondary-color);
}

@media (max-width: 767.98px) {
    .biz-overview-ratings {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 575.98px) {
    .biz-overview-head.has-logo {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .biz-overview-logo {
        max-width: 96px;
    }
}

/* ===== Recommendation Cards ===== */

/* Carousel: 3 cards a row (2 on tablet, 1 + a peek on phones); the track scrolls, arrows step one card */
.rec-carousel { position: relative; }

.rec-track {
    display: flex;
    gap: var(--space-16);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.rec-track::-webkit-scrollbar { display: none; }

.rec-slide {
    flex: 0 0 calc((100% - 2 * var(--space-16)) / 3);
    scroll-snap-align: start;
}

@media (max-width: 991.98px) {
    .rec-slide { flex-basis: calc((100% - var(--space-16)) / 2); }
}

@media (max-width: 575.98px) {
    .rec-slide { flex-basis: 82%; }
}

.rec-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-default);
    border-radius: 50%;
    background: #fff;
    color: var(--text-default);
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transform: translateY(-50%);
    transition: box-shadow 0.15s, transform 0.15s;
}
.rec-nav[hidden] { display: none; }
.rec-nav.is-prev { left: -12px; }
.rec-nav.is-next { right: -12px; }
.rec-nav:active { transform: translateY(-50%) scale(0.92); }
.rec-nav:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

@media (hover: hover) {
    .rec-nav:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28); }
}

.rec-card {
    border: 1px solid var(--border-default);
    border-radius: 0.5rem;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s;
}

@media (hover: hover) {

.rec-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
}

.rec-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    flex: 1;
}

@media (hover: hover) {

.rec-card-link:hover {
    color: inherit;
    text-decoration: none;
}
}

.rec-card-img {
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: var(--background);
}

.rec-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rec-card-body {
    padding: 0.75rem;
}

.rec-card-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-default);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.rec-preferred-badge {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.65rem;
    font-weight: 600;
    background: var(--accent-subtle);
    color: var(--brand);
    border-radius: 999px;
    border: 1px solid var(--accent);
    vertical-align: middle;
}

.rec-card-rating {
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.rec-score {
    font-size: 18px;
    font-weight: 700;
    color: var(--brand);
}

.rec-score-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--brand);
    margin-left: 0.2rem;
}

.rec-review-count {
    font-size: 0.75rem;
    color: var(--text-subtle);
    margin-left: 0.2rem;
}

.rec-no-rating {
    font-size: 0.75rem;
    color: var(--text-subtle);
    margin-bottom: 0.25rem;
}

.rec-scores-list {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
}

.rec-scores-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    padding: 0.15rem 0;
    border-top: 1px solid var(--border-default);
}

.rec-score-name {
    color: var(--text-subtle);
}

.rec-score-val {
    font-weight: 700;
    color: var(--text-default);
}

.rec-card-footer {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border-default);
    text-align: center;
}

.rec-compare-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-default);
    text-decoration: none;
}

@media (hover: hover) {

.rec-compare-link:hover {
    color: var(--action);
}
}

/* ===== Agoda-Style Photo Strip =====
   Hero + up to 6 tiles (photos or videos) in one grid. 6 tiles = 3×2 like Agoda;
   fewer tiles drop columns (--cols set inline) and an odd last tile spans both rows,
   so there are never empty placeholders. Outer corners 16px (clipped), inner 4px. */
.biz-photo-strip {
    display: grid;
    grid-template-columns: 2.2fr repeat(var(--cols, 3), 1fr);
    grid-template-rows: 1fr 1fr;
    grid-auto-flow: column;
    gap: 8px;
    aspect-ratio: 3.85;
    border-radius: 16px;
    overflow: hidden;
}

.biz-photo-strip.is-single {
    grid-template-columns: 1fr;
}

.photo-strip-main {
    position: relative;
    grid-row: 1 / -1;
    min-height: 0;
}

.photo-strip-main-btn,
.photo-strip-thumb-btn {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: var(--background-subtle);
    cursor: pointer;
    overflow: hidden;
}

/* Odd tile count: the last tile fills its column (hero is child 1, so an odd count ends on an even child) */
.photo-strip-thumb-btn:last-child:nth-child(even) {
    grid-row: span 2;
}

.photo-strip-main-btn img,
.photo-strip-thumb-btn img,
.photo-strip-thumb-btn video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

@media (hover: hover) {

.photo-strip-main-btn:hover img,
.photo-strip-thumb-btn:hover img,
.photo-strip-thumb-btn:hover video {
    transform: scale(1.04);
}
}

/* Light bottom scrim behind the transparent "View gallery" pill */
.photo-strip-main:has(.photo-strip-badge) .photo-strip-main-btn::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    background: linear-gradient(to bottom, transparent, rgba(4, 7, 10, 0.45));
    pointer-events: none;
}

.photo-strip-main-btn:focus-visible,
.photo-strip-thumb-btn:focus-visible {
    outline: 3px solid var(--action);
    outline-offset: -3px;
}

/* "View gallery": transparent pill on the hero; the dark tint keeps the white text legible on bright photos */
.photo-strip-badge {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {

.photo-strip-badge:hover {
    transform: translateY(-1px);
    background: rgba(0, 0, 0, 0.65);
    color: var(--blush);
}
}

.photo-strip-badge:active {
    transform: scale(0.97);
}

/* "+N more" on the last tile: bottom scrim like Agoda's "+200 Guest photos" */
.photo-strip-more-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 28px 14px 10px;
    background: linear-gradient(to bottom, transparent, rgba(4, 7, 10, 0.7));
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 700;
    text-align: right;
    pointer-events: none;
}

/* ===== Gallery dialog (Agoda): centred white panel over a dimmed page ===== */
.biz-gallery-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: none;
    padding: 40px;
    background: rgba(0, 0, 0, 0.6);
}

.biz-gallery-overlay.active {
    display: flex;
}

.gallery-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1680px;
    height: 100%;
    margin: 0 auto;
    background: var(--surface);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.gallery-panel-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px 0 20px;
    border-bottom: 1px solid var(--border-default);
    flex-shrink: 0;
}

.gallery-tabs {
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.gallery-tabs::-webkit-scrollbar { display: none; }

.gallery-tab {
    flex: 0 0 auto;
    padding: 14px 18px 12px;
    border: none;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--text-subtle);
    font-size: var(--fs-base);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

@media (hover: hover) {

.gallery-tab:hover {
    color: var(--text-default);
}
}

.gallery-tab.is-active {
    color: var(--action);
    border-bottom-color: var(--action);
}

.gallery-panel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding-bottom: 8px;
}

.gallery-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border: none;
    border-radius: 999px;
    background: var(--whatsapp);
    color: var(--text-inverted);
    font-size: var(--fs-sm);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s;
}

@media (hover: hover) {

.gallery-cta:hover {
    background: var(--whatsapp-hover);
}
}

/* Official / From parents pills (Agoda's Property / Guest images): row 1 with the actions, tabs drop to row 2 */
.gallery-panel-header.has-sources {
    flex-wrap: wrap;
    row-gap: 0;
    padding-top: 12px;
}

.gallery-panel-header.has-sources .gallery-tabs {
    order: 3;
    flex-basis: 100%;
}

.gallery-sources {
    display: flex;
    gap: 8px;
    padding-bottom: 8px;
}

.gallery-source {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 18px;
    border: 1.5px solid var(--border-default);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-default);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

@media (hover: hover) {

.gallery-source:hover {
    border-color: var(--action);
}
}

.gallery-source.is-active {
    border-color: var(--action);
    background: color-mix(in srgb, var(--action) 10%, var(--surface));
    color: var(--action);
}

.gallery-photo-grid[data-source="centre"] .gallery-photo-item[data-source="parents"],
.gallery-photo-grid[data-source="parents"] .gallery-photo-item[data-source="centre"] {
    display: none;
}

/* Tab filter: hide the other media type */
.gallery-photo-grid[data-filter="photo"] .gallery-youtube-item,
.gallery-photo-grid[data-filter="video"] .gallery-photo-item:not(.gallery-youtube-item) {
    display: none;
}

.gallery-close-btn {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-subtle);
    font-size: var(--fs-sm);
    transition: background 0.2s;
}

@media (hover: hover) {

.gallery-close-btn:hover {
    background: var(--background);
}
}

.gallery-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.gallery-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.gallery-photo-item {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    padding: 0;
    background: var(--background);
    display: block;
}

.gallery-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s;
    display: block;
}

@media (hover: hover) {

.gallery-photo-item:hover img {
    transform: scale(1.04);
}
}

.gallery-photo-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    transition: background 0.2s;
    pointer-events: none;
}

@media (hover: hover) {

.gallery-photo-item:hover::after {
    background: rgba(0, 0, 0, 0.1);
}
}

.gallery-play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2.5rem;
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* Viewer panel (shown over gallery) */
.gallery-viewer-panel {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.gallery-viewer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90vw;
    max-height: 80vh;
}

.gallery-viewer-img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
}

.gallery-viewer-youtube {
    width: 80vw;
    max-width: 900px;
}

.gallery-viewer-back-btn {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--fs-sm);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
    z-index: 11;
}

@media (hover: hover) {

.gallery-viewer-back-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}
}

.gallery-viewer-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: var(--fs-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 11;
}

@media (hover: hover) {

.gallery-viewer-close-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}
}

.gallery-viewer-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: var(--fs-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 11;
}

@media (hover: hover) {

.gallery-viewer-nav-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}
}

.gallery-viewer-prev { left: 20px; }
.gallery-viewer-next { right: 20px; }

.gallery-viewer-counter {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--fs-sm);
    background: rgba(0, 0, 0, 0.45);
    padding: 4px 14px;
    border-radius: 20px;
    white-space: nowrap;
    z-index: 11;
}

@media (max-width: 767.98px) {
    .biz-gallery-overlay { padding: 0; }
    .gallery-panel { border-radius: 0; }
    .gallery-panel-header { padding-left: 8px; gap: 8px; }
    .gallery-tab { padding-inline: 12px; }
    .gallery-cta { display: none; }
    .gallery-sources { min-width: 0; overflow-x: auto; scrollbar-width: none; }
    .gallery-source { height: 34px; padding: 0 12px; }
    .gallery-photo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .gallery-viewer-prev { left: 8px; }
    .gallery-viewer-next { right: 8px; }
    .gallery-viewer-nav-btn {
        width: 38px;
        height: 38px;
    }
}

/* Review title & comment distinction */
.review-title {
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
    font-size: var(--fs-sm) !important;
    font-weight: 700 !important;
    color: var(--text-default) !important;
    line-height: 1.5;
    display: block;
    overflow-wrap: anywhere;
    min-width: 0;
}

.review-comment-wrapper {
    margin-top: 4px !important;
    overflow-wrap: anywhere;
    min-width: 0;
}

.review-comment-text {
    margin: 0 !important;
    font-size: var(--fs-xs);
    line-height: 1.55;
    color: var(--text-subtle);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    min-width: 0;
}

/* ===== Sticky section tabs (Agoda-style) ===== */
.biz-section-tabs {
    position: sticky;
    top: var(--biz-tabs-top, 64px);
    z-index: 1020;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border-default);
    border-radius: 0.5rem;
    box-shadow: 0 1px 4px rgba(var(--brand-rgb), 0.08);
    padding: 0 0.5rem;
}

.biz-section-tabs-track {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.biz-section-tabs-track::-webkit-scrollbar {
    display: none;
}

.biz-section-tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.85rem 1.1rem calc(0.85rem - 3px);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-subtle);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease;
}

.biz-section-tab:focus-visible {
    color: var(--bs-primary, var(--action));
}

@media (hover: hover) {

.biz-section-tab:hover {
    color: var(--bs-primary, var(--action));
}
}

.biz-section-tab.active {
    color: var(--bs-primary, var(--action));
    border-bottom-color: var(--bs-primary, var(--brand));
}

.biz-back-to-top {
    appearance: none;
    background: none;
    border: none;
    flex-shrink: 0;
    margin-left: auto;
    padding: 0.85rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-default);
    white-space: nowrap;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.biz-back-to-top.is-visible {
    visibility: visible;
    opacity: 1;
}

@media (hover: hover) {

.biz-back-to-top:hover {
    color: var(--bs-primary, var(--action));
}
}

/* Tablet/mobile: out of the page flow; a full-width white strip (like the .efb-wrap filter bar)
   that slides in once Overview reaches the top and hides on scroll down (biz-details.js) */
@media (max-width: 991.98px) {
    .biz-section-tabs {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 !important;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: var(--surface);
        box-shadow: 0 2px 6px rgba(4, 7, 10, 0.12);
        transform: translateY(calc(-100% - 10px)); /* 10px: clear the shadow */
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0.25s;
    }

    .biz-section-tabs.is-shown {
        transform: none;
        visibility: visible;
    }

    .biz-back-to-top { display: none; }
}

/* Agoda: dark promo strip on the sticky card */
.sticky-card-special-banner { background: var(--text-default) !important; color: var(--text-inverted) !important; }

/* ── Tablet/mobile gallery (Agoda): preview + thumbnail rail ──────────── */
.biz-mgallery { display: none; }

@media (max-width: 991.98px) {
    .biz-photo-strip { display: none; }
    .biz-mgallery { display: block; overflow: hidden; border-radius: 8px; background: #222; }

    .biz-mgallery-stage { position: relative; height: min(56vw, 420px); }
    .biz-mgallery-track {
        display: flex;
        height: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .biz-mgallery-track::-webkit-scrollbar { display: none; }
    .biz-mgallery-slide {
        position: relative;
        flex: 0 0 100%;
        padding: 0;
        border: 0;
        background: var(--background-subtle);
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .biz-mgallery-slide img,
    .biz-mgallery-slide video,
    .biz-mgallery-thumb img,
    .biz-mgallery-thumb video { display: block; width: 100%; height: 100%; object-fit: cover; }

    .biz-mgallery-nav {
        position: absolute;
        top: 50%;
        z-index: 2;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 50%;
        background: #fff;
        color: #222;
        font-size: 14px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
        transform: translateY(-50%);
    }
    .biz-mgallery-nav:active { transform: translateY(-50%) scale(0.92); }
    .biz-mgallery-nav.is-prev { left: var(--space-12); }
    .biz-mgallery-nav.is-next { right: var(--space-12); }

    .biz-mgallery-counter {
        position: absolute;
        right: var(--space-12);
        bottom: var(--space-12);
        padding: 3px 12px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        pointer-events: none;
    }

    .biz-mgallery-thumbs {
        display: flex;
        gap: 4px;
        padding: 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .biz-mgallery-thumbs::-webkit-scrollbar { display: none; }
    .biz-mgallery-thumb {
        position: relative;
        flex: 0 0 auto;
        width: 64px;
        height: 46px;
        padding: 0;
        border: 2px solid transparent;
        background: var(--background-subtle);
        opacity: 0.7;
        transition: opacity var(--duration-fast, 150ms), border-color var(--duration-fast, 150ms);
    }
    .biz-mgallery-thumb.is-active { border-color: #fff; opacity: 1; }
    .biz-mgallery-thumb .gallery-play-icon { font-size: 16px; }
}

/* Phones: full-bleed like Agoda */
@media (max-width: 767.98px) {
    .biz-mgallery { margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5); border-radius: 0; }
}

/* Phones: breadcrumb hidden and Back is in the header (navbar.php), so the stack takes no room */
@media (max-width: 767.98px) {
    .biz-breadcrumb-stack { margin: 0 !important; }
}

/* ── Tablet/mobile: bottom sheet (#bizSheet) reusing the desktop .sbc card ──
   Collapsed: name + score, then ♥ · Compare · I'm Interested. Dragging the
   handle/sheet vertically (biz-details.js) toggles .is-open to reveal the rest. */
@media (max-width: 991.98px) {
    body:has(#bizSheet) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } /* collapsed sheet height */

    .biz-sheet {
        --u: 1px; /* .sbc sizes are in 340px-design units */
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030; /* above page chrome, below Bootstrap modals (1055) */
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--background);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -2px 12px rgba(4, 7, 10, 0.16);
        touch-action: none; /* swipes toggle the sheet instead of scrolling the page */
    }

    /* Back-to-top FAB sits above the collapsed sheet (~97px; its title is one ellipsised line) */
    .back-to-top-fab { bottom: calc(113px + env(safe-area-inset-bottom)); }

    .biz-sheet-handle {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 24px;
        padding: 0;
        border: 0;
        background: none;
    }

    .biz-sheet-handle span {
        width: 40px;
        height: 4px;
        border-radius: var(--radius-max);
        background: var(--border-divider);
    }

    .biz-sheet-handle:focus-visible span { background: var(--action); }

    .biz-sheet .sticky-biz-card { max-width: 720px !important; margin: 0 auto !important; }
    .biz-sheet .sticky-biz-card .card.sbc { margin: 0 !important; border: 0 !important; border-radius: 0; box-shadow: none !important; }
    .biz-sheet .sticky-biz-card .card-body { padding: 0 !important; } /* beats the generic mobile .card-body padding */
    .biz-sheet .sticky-biz-card .sbc-main { padding-top: 4px; }
    .biz-sheet .sticky-card-special-banner { margin: 0 16px 8px; border-radius: 8px; }
    .biz-sheet .sbc-enquiry { order: 1; } /* ♥ · Compare · I'm Interested */

    /* Expandable parts: slide open via max-height (content is short, 240px is a safe ceiling) */
    .biz-sheet :is(.sticky-card-special-banner, .sbc-rating-count, .sbc-cats, .sbc-highlights, .sbc-view-collection, .sbc-footer) {
        max-height: 240px;
        overflow: hidden;
        transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease, padding 0.3s ease;
    }

    .biz-sheet:not(.is-open) :is(.sticky-card-special-banner, .sbc-rating-count, .sbc-cats, .sbc-highlights, .sbc-view-collection, .sbc-footer) {
        max-height: 0;
        opacity: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
    }

    /* Collapsed: scale the whole .sbc down (its sizes are calc(n * --u)) so it keeps every item but takes less screen */
    .biz-sheet:not(.is-open) { --u: 0.8px; }
    .biz-sheet:not(.is-open) .biz-sheet-handle { height: 16px; }
    .biz-sheet:not(.is-open) .sticky-biz-card .sbc-main { padding-top: 0; padding-bottom: 10px; }
    .biz-sheet:not(.is-open) .sbc-head { align-items: center; margin-bottom: 8px; }

    .biz-sheet:not(.is-open) .sbc-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    @media (prefers-reduced-motion: reduce) {
        .biz-sheet * { transition: none !important; }
    }
}

/* ── Tablet/mobile: listing details + reviews ──────────────────────────────
   style.css indents every .page-content ul on touch screens (1.25rem !important) and
   makes every .btn a 44px flex box; the lists and reply links here undo that */
@media (max-width: 991.98px) {
    .biz-section .list-unstyled,
    ul.rec-scores-list { padding-left: 0 !important; }

    /* You Might Like These: three sub-scores, no rules between them */
    .rec-scores-list li { border-top: 0; padding: 2px 0; }

    /* Review tabs: one row that scrolls sideways; only the active tab keeps its underline */
    .review-tab-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .review-tab-nav::-webkit-scrollbar { display: none; }
    .review-tab-nav .nav-item { flex-shrink: 0; }
    /* margin 0: the scroll row clips style.css's -2px overhang, which hid most of the underline */
    .review-tab-nav .nav-link { white-space: nowrap; margin-bottom: 0; }
    .review-tab-nav .nav-link:not(.active) { border-bottom-color: transparent; }

    /* Rating summary: one stacked column; the score stays the hero */
    .review-summary-row { flex-direction: column; gap: var(--space-16); }

    .review-summary-score {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "cap cap" "num label" "num meta";
        column-gap: var(--space-12);
        align-items: center;
        flex: none;
        padding: 0 !important;
        border: 0 !important;
    }
    .review-summary-score > small { grid-area: cap; margin-bottom: var(--space-4) !important; font-size: 13px; }
    .review-summary-score .review-score-number { grid-area: num; margin: 0; }
    .review-summary-score .review-score-value { font-size: 48px; letter-spacing: -0.02em; }
    .review-summary-score .review-score-label { grid-area: label; align-self: end; margin: 0; font-size: 20px; }
    .review-summary-score .review-verified-text { grid-area: meta; align-self: start; margin-top: 2px !important; font-size: 13px !important; }

    /* Google / External tabs: same hero, the stars stand in for the label */
    .review-ext-score {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "cap cap" "num label" "num meta";
        column-gap: var(--space-12);
        align-items: center;
    }
    .review-ext-score > small { grid-area: cap; margin-bottom: var(--space-4) !important; font-size: 13px; }
    .review-ext-score .review-score-number { grid-area: num; margin: 0; }
    .review-ext-score .review-score-value { font-size: 48px; letter-spacing: -0.02em; }
    .review-ext-score .review-stars { grid-area: label; align-self: end; margin: 0 !important; font-size: 18px !important; }
    .review-ext-score .review-verified-text { grid-area: meta; align-self: start; margin-top: var(--space-4) !important; font-size: 13px !important; }

    /* All Reviews: per-source scores as a tinted list, score on the right */
    ul.review-source-breakdown {
        gap: 0;
        padding: 0 var(--space-16) !important;
        border-radius: var(--radius-8);
        background: var(--background-subtle);
    }
    .review-source-breakdown li {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "name score" "meta score";
        row-gap: 0;
        padding: var(--space-12) 0;
    }
    .review-source-breakdown li:last-child { padding-bottom: var(--space-12); }
    .review-source-name { grid-area: name; font-size: 14px; }
    .review-source-meta { grid-area: meta; font-size: 12px; }
    .review-source-score { grid-area: score; align-self: center; font-size: 20px; }

    /* MyClevan: sub-ratings flush, rating ranges become one scrollable chip row */
    .review-summary-categories { flex: none; padding: 0 !important; border: 0 !important; }

    .review-summary-filter,
    .review-keywords-container {
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--space-8) !important;
        margin: 0 calc(-1 * var(--space-16));
        padding: 2px var(--space-16) !important;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .review-summary-filter::-webkit-scrollbar,
    .review-keywords-container::-webkit-scrollbar { display: none; }

    .review-rating-filter-title { flex-shrink: 0; font-size: 13px !important; }
    .review-rating-filter-checkbox { display: none; }

    .review-rating-filter-item,
    .review-keyword-pill {
        flex-shrink: 0;
        gap: var(--space-4);
        height: 36px;
        padding: 0 14px !important;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-max);
        background: var(--surface, #fff);
        font-size: 14px !important;
        white-space: nowrap;
    }
    .review-rating-filter-item.active {
        border-color: var(--brand);
        background: var(--brand-subtle);
    }
    .review-rating-filter-label { flex: none; }
    .review-rating-filter-count { font-size: 12px !important; }
    .review-rating-filter-clear { flex-shrink: 0; margin: 0; font-size: 13px; }

    /* Keywords scroll sideways, so every one shows and "Show more" goes */
    .review-keywords-title { margin-bottom: var(--space-8) !important; font-size: 13px !important; }
    .review-keyword-extra.d-none { display: inline-flex !important; }
    .review-keyword-more { display: none !important; }

    /* Sort: label left, select right, one row */
    .review-sort-row { justify-content: space-between; }
    .review-sort-container { flex: 1; justify-content: space-between; }
    .review-sort-label { font-size: 13px; font-weight: 600; color: var(--text-subtle); }
    .review-sort-select { height: 36px; font-size: 14px; }

    /* Pager: only the one under the list (it scrolls back up); round tap targets */
    .review-list-controls .review-pagination { display: none !important; }
    .review-pagination { gap: 2px; margin-top: var(--space-16); }
    .review-page-link,
    .review-page-arrow,
    .review-page-gap {
        min-width: 30px;
        height: 30px;
        padding: 0;
        border: 0;
        border-radius: var(--radius-max);
        font-size: 15px;
    }
    .review-page-gap { min-width: 16px; }
    .review-page-link.is-current { background: var(--action); color: #fff; }
    .review-page-arrow { width: 32px; height: 32px; border: 1px solid var(--border-default); }
    .review-page-arrow.is-disabled { border-color: var(--border-subtle); }

    /* Review card: avatar · name/source · score header, text full width below (no inner box) */
    .review-split-wrap { gap: var(--space-12) !important; }
    .review-left-panel {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        column-gap: var(--space-12);
        row-gap: 2px;
        align-items: center;
    }
    .review-left-avatar { grid-row: 1 / span 2; width: 40px !important; height: 40px !important; font-size: 16px; }
    .review-left-username { grid-column: 2; font-size: 15px; line-height: 1.3; }
    .review-all-source { grid-column: 2; font-size: 12px; }
    .review-left-score,
    .review-left-panel > .review-stars {
        grid-column: 3;
        grid-row: 1 / span 2;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
    }
    .review-left-score-num { font-size: 22px !important; }
    .review-left-score-label { font-size: 12px; font-weight: 600; }

    .review-right-card { background: none; border-radius: 0; }
    .review-right-body { padding: 0 !important; }
    .review-card .review-right-title { margin: 0 0 var(--space-4) !important; font-size: 15px !important; line-height: 1.4; }
    .review-card .review-right-comment { margin: 0 !important; font-size: 14px !important; line-height: 1.55; }
    .review-right-date-row { margin-top: var(--space-8); row-gap: var(--space-4); }
    .review-right-date { font-size: 12px; }
    .review-right-action-btns { margin: 0 -8px 0 auto; gap: var(--space-4); }
    .review-all-item > .review-card { margin-bottom: 0 !important; padding-bottom: 0 !important; }
    .review-reply-toggle,
    .review-helpful-btn,
    .review-helpful-link { min-height: 32px; padding: 0 var(--space-8) !important; font-size: 13px !important; }
    .content-report-btn { width: 32px; height: 32px; }

    /* Replies: same design, sizes tuned; the date stays quiet */
    .review-replies-container { margin: var(--space-12) 0 0; padding: var(--space-12); border-radius: var(--radius-8); }
    .review-replies-count { font-size: 12px !important; }
    .review-reply-item { margin-bottom: var(--space-12); }
    .review-reply-item img { width: 28px !important; height: 28px !important; }
    .review-reply-item strong { font-size: 13px !important; }
    .review-reply-item small { font-size: 11px !important; }
    .review-card .review-reply-item .reply-message-text { margin: 2px 0 0 !important; font-size: 14px !important; line-height: 1.45 !important; }
    .review-reply-item .btn { min-width: 0 !important; min-height: 28px !important; font-size: 12px !important; }
    .show-more-review-replies-btn,
    .show-less-review-replies-btn { min-height: 28px !important; font-size: 12px !important; }
    /* .text-center can't centre a flex .btn, so centre the button itself */
    .show-all-nested-replies-btn,
    .show-more-nested-btn { margin-inline: auto !important; }
}
/* Add review: style.css shrinks .btn to --fs-xs (and .page-content a to 0.8rem on touch), so the text read smaller than its + icon */
#reviews .biz-add-review-btn { font-size: 15px !important; }