/* ==========================================================
   BELHASA PRODUCT PAGE – REFERENCE MATCH V1.0.3
   ========================================================== */

.bhdp-wrap,
.bhdp-modal,
.bhdp-image-lightbox {
    --bh-orange: #f7940a;
    --bh-orange-dark: #ef7900;
    --bh-navy: #142533;
    --bh-text: #243544;
    --bh-muted: #6b7a89;
    --bh-line: #dfe6ec;
    --bh-soft: #f4f6f8;
    --bh-green: #16a765;
    font-family: "Be Vietnam Pro","Plus Jakarta Sans",Arial,sans-serif;
    color: var(--bh-text);
}

.bhdp-wrap * { box-sizing: border-box; }

.bhdp-container {
    width: min(100% - 48px, 1500px);
    margin: 0 auto;
}

.bhdp-breadcrumb {
    display:flex;
    align-items:center;
    gap:8px;
    min-height:48px;
    font-size:12px;
    color:#81909e;
    white-space:nowrap;
    overflow:hidden;
}

.bhdp-breadcrumb a {
    color:#768592;
    text-decoration:none;
}

.bhdp-breadcrumb .current {
    overflow:hidden;
    text-overflow:ellipsis;
}

.bhdp-main-grid {
    display:grid;
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    gap:52px;
    align-items:start;
    padding:18px 0 36px;
}

/* NO outer cards – matches reference */
.bhdp-gallery,
.bhdp-summary {
    min-width:0;
}

.bhdp-gallery {
    display:grid;
    grid-template-columns:104px minmax(0,1fr);
    gap:18px;
}

.bhdp-thumbs {
    display:flex;
    flex-direction:column;
    gap:14px;
}

.bhdp-thumb {
    width:100%;
    aspect-ratio:1/1;
    border:1px solid #e4e9ed;
    border-radius:8px;
    background:#f4f6f7;
    padding:6px;
    cursor:pointer;
    overflow:hidden;
    transition:border-color .2s ease, background .2s ease;
}

.bhdp-thumb:hover {
    border-color:var(--bh-orange);
    background:#fff;
}

.bhdp-thumb.is-active {
    border:2px solid var(--bh-orange);
    background:#fff;
}

.bhdp-thumb img {
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.bhdp-main-image {
    position:relative;
    min-height:590px;
    background:#fff;
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
    overflow:hidden;
}

.bhdp-main-image > img {
    width:100%;
    height:100%;
    max-height:520px;
    object-fit:contain;
    display:block;
}

.bhdp-zoom {
    position:absolute;
    top:14px;
    right:14px;
    width:42px;
    height:42px;
    border:0;
    border-radius:7px;
    background:#fff;
    color:#172735;
    font-size:20px;
    cursor:pointer;
    box-shadow:0 6px 18px rgba(20,37,51,.08);
}

.bhdp-summary {
    padding-top:4px;
}

.bhdp-brand {
    color:#687786;
    font-size:16px;
    margin-bottom:6px;
    background:transparent;
    padding:0;
    border-radius:0;
    display:block;
    font-weight:500;
}

.bhdp-summary h1 {
    margin:0;
    color:var(--bh-navy);
    font-size:clamp(34px,3.1vw,54px);
    line-height:1.06;
    letter-spacing:-.035em;
    font-weight:800;
}

.bhdp-subline {
    margin-top:8px;
    color:#657586;
    font-size:16px;
}

.bhdp-meta {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin-top:22px;
    color:#778593;
    font-size:14px;
}

.bhdp-meta strong {
    color:#667583;
    font-weight:500;
}

.bhdp-meta a {
    color:var(--bh-orange-dark);
    text-decoration:none;
}

.bhdp-short-description {
    margin-top:20px;
    color:#61707d;
    font-size:15px;
    line-height:1.65;
}

.bhdp-short-description p { margin:0; }

/* reference-style 4-strip */
.bhdp-benefits {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    margin-top:24px;
    border:1px solid #e8edf1;
    border-radius:6px;
    background:#fbfcfd;
    overflow:hidden;
}

.bhdp-benefit {
    min-height:82px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 11px;
    border-right:1px solid #e6ebef;
    color:#263746;
    font-size:11px;
    line-height:1.35;
}

.bhdp-benefit:last-child { border-right:0; }

.bhdp-benefit-icon {
    color:var(--bh-orange);
    font-size:27px;
    line-height:1;
    flex:0 0 auto;
}

.bhdp-info-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-top:20px;
}

.bhdp-info-grid > div {
    min-width:0;
    background:#f4f6f8;
    border-radius:6px;
    padding:14px 15px;
}

.bhdp-info-grid small,
.bhdp-info-grid strong { display:block; }

.bhdp-info-grid small {
    margin-bottom:5px;
    color:#60707e;
    font-size:11px;
}

.bhdp-info-grid strong {
    color:#536472;
    font-size:12px;
    font-weight:500;
    overflow-wrap:anywhere;
}

.bhdp-actions {
    display:grid;
    grid-template-columns:1fr .9fr;
    gap:16px;
    margin-top:24px;
}

.bhdp-btn {
    min-height:62px;
    border-radius:6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 18px;
    font-size:15px;
    font-weight:800;
    text-decoration:none!important;
    cursor:pointer;
    transition:background .2s ease,color .2s ease,transform .2s ease;
}

.bhdp-btn:hover { transform:translateY(-1px); }

.bhdp-btn-quote {
    border:0;
    background:linear-gradient(135deg,var(--bh-orange),#ff7100);
    color:#fff;
}

.bhdp-btn-quote:hover {
    background:var(--bh-orange-dark);
    color:#fff;
}

.bhdp-btn-whatsapp {
    border:1px solid #d3ecdf;
    background:#f4fbf7;
    color:#148a55;
}

.bhdp-btn-whatsapp:hover {
    background:#1b9a5f;
    border-color:#1b9a5f;
    color:#fff;
}

.bhdp-trust {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:18px;
    color:#4f5e6b;
    font-size:11px;
}

.bhdp-trust span {
    display:flex;
    align-items:center;
    gap:8px;
}

/* TABS */
.bhdp-tabs-section {
    margin-top:14px;
    border:1px solid var(--bh-line);
    border-radius:7px;
    background:#fff;
    overflow:hidden;
}

.bhdp-tabs {
    display:flex;
    align-items:center;
    overflow-x:auto;
    border-bottom:1px solid var(--bh-line);
    scrollbar-width:none;
    background:#fff;
}

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

.bhdp-tab {
    position:relative;
    min-width:max-content;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    color:#182737!important;
    padding:17px 26px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    box-shadow:none!important;
    outline:none!important;
    transition:background .18s ease,color .18s ease;
}

/* User requested: hover MUST be orange background + white text */
.bhdp-tab:hover,
.bhdp-tab:focus-visible {
    background:var(--bh-orange)!important;
    color:#fff!important;
}

/* Active stays reference-style: orange text + underline */
.bhdp-tab.is-active {
    background:#fff!important;
    color:var(--bh-orange-dark)!important;
    font-weight:800;
}

.bhdp-tab.is-active:hover {
    background:var(--bh-orange)!important;
    color:#fff!important;
}

.bhdp-tab.is-active::after {
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    bottom:-1px;
    height:3px;
    background:var(--bh-orange);
}

.bhdp-tab-panel {
    display:none;
    padding:24px 26px 28px;
}

.bhdp-tab-panel.is-active { display:block; }

.bhdp-tab-panel h2 {
    margin:0 0 10px;
    color:var(--bh-navy);
    font-size:27px;
    line-height:1.2;
    font-weight:800;
}

.bhdp-content {
    color:#677684;
    font-size:14px;
    line-height:1.75;
}

.bhdp-spec-table {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1px;
    background:#e6ebef;
    border:1px solid #e6ebef;
    border-radius:6px;
    overflow:hidden;
}

.bhdp-spec-table > div {
    background:#fff;
    display:grid;
    grid-template-columns:minmax(120px,.65fr) 1fr;
    gap:18px;
    padding:14px 16px;
}

.bhdp-spec-table span { color:#6c7b89; }
.bhdp-spec-table strong { color:#253746; font-weight:600; }

/* RELATED – closer to exact reference */
.bhdp-related {
    padding:34px 0 46px;
}

.bhdp-related-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:16px;
}

.bhdp-related-head h2 {
    margin:0;
    color:#000!important;
    font-size:28px;
    line-height:1.2;
    font-weight:800;
}

.bhdp-related-head a {
    color:var(--bh-orange-dark);
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
}

.bhdp-related-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}

.bhdp-related-card {
    min-width:0;
    border:1px solid #e2e7eb;
    border-radius:6px;
    background:#fff;
    padding:16px;
    display:flex;
    flex-direction:column;
    box-shadow:none;
}

.bhdp-related-card:hover {
    border-color:#d8dee4;
}

.bhdp-related-image {
    height:260px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    background:#fff;
    padding:8px;
}

.bhdp-related-image img {
    width:100%;
    height:100%;
    object-fit:contain;
}

.bhdp-related-title {
    min-height:58px;
    margin-top:12px;
    color:#fff!important;
    font-size:14px;
    line-height:1.35;
    font-weight:500;
    text-decoration:none!important;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.bhdp-related-quote {
    margin-top:auto;
    align-self:flex-start;
    min-width:150px;
    border:0;
    border-radius:4px;
    background:#eef0f5;
    color:#243448;
    padding:11px 18px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:background .18s ease,color .18s ease;
}

.bhdp-related-quote:hover {
    background:var(--bh-orange);
    color:#fff;
}

/* POPUP – reference style */
html.bhdp-modal-open,
body.bhdp-modal-open { overflow:hidden!important; }

.bhdp-modal {
    position:fixed;
    inset:0;
    z-index:999999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.bhdp-modal.is-open { display:flex; }

.bhdp-modal-backdrop {
    position:absolute;
    inset:0;
    background:rgba(8,20,30,.56);
    backdrop-filter:blur(3px);
}

.bhdp-modal-dialog {
    position:relative;
    z-index:1;
    width:min(900px,100%);
    max-height:calc(100vh - 40px);
    overflow:auto;
    background:#fff;
    border-radius:8px;
    padding:24px 28px 22px;
    box-shadow:0 30px 80px rgba(0,0,0,.28);
}

.bhdp-modal-close {
    position:absolute;
    right:14px;
    top:12px;
    width:38px;
    height:38px;
    border:0;
    background:transparent;
    color:#1b2b39;
    font-size:30px;
    line-height:1;
    cursor:pointer;
}

.bhdp-modal-header h2 {
    margin:0;
    color:var(--bh-navy);
    font-size:27px;
    font-weight:800;
}

.bhdp-modal-header p {
    margin:4px 44px 0 0;
    color:#536472;
    font-size:13px;
}

.bhdp-modal-form { margin-top:18px; }

/* New recommended form markup */
.bhdp-modal .bh-cf7-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:15px 28px;
}

.bhdp-modal .bh-cf7-field label,
.bhdp-modal .contact-form label {
    display:block;
    margin-bottom:6px;
    color:#223344;
    font-size:12px;
    font-weight:600;
}

/* Also style user's existing .contact-form/.row form */
.bhdp-modal .contact-form .row {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:15px 28px!important;
    margin:0!important;
}

.bhdp-modal .contact-form .form-group,
.bhdp-modal .contact-form .form-btn {
    width:100%!important;
    max-width:none!important;
    flex:none!important;
    padding:0!important;
    margin:0!important;
}

.bhdp-modal .contact-form .col-12 {
    grid-column:1 / -1;
}

.bhdp-modal .wpcf7-form-control:not(.wpcf7-submit),
.bhdp-modal .contact-form input,
.bhdp-modal .contact-form textarea,
.bhdp-modal .contact-form select {
    width:100%;
    min-height:44px;
    border:1px solid #ccd6df!important;
    border-radius:5px!important;
    background:#fff!important;
    color:#263746!important;
    padding:10px 13px!important;
    outline:none!important;
    box-shadow:none!important;
    font-size:13px!important;
}

.bhdp-modal textarea.wpcf7-form-control,
.bhdp-modal .contact-form textarea {
    min-height:82px!important;
    resize:vertical;
}

.bhdp-modal .wpcf7-form-control[readonly],
.bhdp-modal .contact-form input[readonly] {
    background:#edf1f4!important;
    color:#70808d!important;
}

.bhdp-modal .wpcf7-form-control:focus,
.bhdp-modal .contact-form input:focus,
.bhdp-modal .contact-form textarea:focus {
    border-color:var(--bh-orange)!important;
    box-shadow:0 0 0 3px rgba(247,148,10,.10)!important;
}

.bhdp-modal .bh-cf7-submit {
    grid-column:2;
    display:flex;
    justify-content:flex-end;
}

.bhdp-modal .wpcf7-submit,
.bhdp-modal .contact-form .themeholy-btn {
    min-width:245px;
    min-height:52px;
    border:0!important;
    border-radius:5px!important;
    background:linear-gradient(135deg,var(--bh-orange),#ff7100)!important;
    color:#fff!important;
    font-weight:800!important;
    cursor:pointer;
    padding:12px 20px!important;
    box-shadow:none!important;
}

.bhdp-modal .wpcf7-submit:hover,
.bhdp-modal .contact-form .themeholy-btn:hover {
    background:var(--bh-orange-dark)!important;
    color:#fff!important;
}

.bhdp-secure-note {
    margin-top:12px;
    color:#6d7c89;
    font-size:11px;
}

/* LIGHTBOX */
.bhdp-image-lightbox {
    position:fixed;
    inset:0;
    z-index:1000000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:30px;
}

.bhdp-image-lightbox.is-open { display:flex; }

.bhdp-image-lightbox-backdrop {
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.86);
}

.bhdp-image-lightbox img {
    position:relative;
    z-index:1;
    max-width:min(1100px,94vw);
    max-height:88vh;
    object-fit:contain;
}

.bhdp-image-lightbox-close {
    position:absolute;
    z-index:2;
    right:24px;
    top:18px;
    border:0;
    background:transparent;
    color:#fff;
    font-size:44px;
    cursor:pointer;
}

/* Elementor */
.elementor-widget-shortcode .bhdp-wrap {
    width:100%!important;
    max-width:none!important;
}

.elementor-widget-shortcode .bhdp-wrap > .bhdp-container {
    width:min(calc(100% - 48px),1500px)!important;
    max-width:1500px!important;
    margin-left:auto!important;
    margin-right:auto!important;
}

/* Responsive */
@media (max-width:1180px) {
    .bhdp-container { width:min(100% - 32px,1180px); }
    .bhdp-main-grid { gap:34px; }
    .bhdp-gallery { grid-template-columns:84px minmax(0,1fr); }
    .bhdp-main-image { min-height:500px; }

    .bhdp-benefits { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .bhdp-benefit:nth-child(2) { border-right:0; }
    .bhdp-benefit:nth-child(-n+2) { border-bottom:1px solid #e6ebef; }

    .bhdp-info-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .bhdp-actions { grid-template-columns:1fr; }
    .bhdp-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:860px) {
    .bhdp-main-grid { grid-template-columns:1fr; gap:28px; }
    .bhdp-main-image { min-height:450px; }
    .bhdp-trust { grid-template-columns:1fr; }
    .bhdp-spec-table { grid-template-columns:1fr; }
}

@media (max-width:640px) {
    .bhdp-container { width:min(100% - 24px,640px); }
    .elementor-widget-shortcode .bhdp-wrap > .bhdp-container {
        width:min(calc(100% - 24px),640px)!important;
    }

    .bhdp-breadcrumb { min-height:44px; font-size:10px; }
    .bhdp-main-grid { padding-top:8px; gap:22px; }

    .bhdp-gallery {
        display:flex;
        flex-direction:column-reverse;
        gap:10px;
    }

    .bhdp-thumbs {
        flex-direction:row;
        overflow-x:auto;
        padding-bottom:4px;
    }

    .bhdp-thumb { flex:0 0 70px; width:70px; }

    .bhdp-main-image {
        min-height:340px;
        padding:22px;
    }

    .bhdp-summary h1 { font-size:31px; }

    .bhdp-benefits,
    .bhdp-info-grid { grid-template-columns:1fr 1fr; }

    .bhdp-tab { padding:15px 17px; font-size:12px; }
    .bhdp-tab-panel { padding:20px 18px 24px; }

    .bhdp-related-head h2 { font-size:25px; }
    .bhdp-related-grid { grid-template-columns:1fr 1fr; gap:10px; }
    .bhdp-related-card { padding:10px; }
    .bhdp-related-image { height:165px; }
    .bhdp-related-title { font-size:12px; min-height:52px; }
    .bhdp-related-quote { width:100%; min-width:0; font-size:11px; padding:10px 8px; }

    .bhdp-modal {
        padding:10px;
        align-items:flex-end;
    }

    .bhdp-modal-dialog {
        width:100%;
        max-height:92vh;
        border-radius:12px 12px 0 0;
        padding:22px 16px 18px;
    }

    .bhdp-modal .bh-cf7-grid,
    .bhdp-modal .contact-form .row {
        grid-template-columns:1fr!important;
        gap:12px!important;
    }

    .bhdp-modal .contact-form .col-12,
    .bhdp-modal .bh-cf7-submit {
        grid-column:1!important;
    }

    .bhdp-modal .wpcf7-submit,
    .bhdp-modal .contact-form .themeholy-btn {
        width:100%!important;
        min-width:0!important;
    }
}

@media (max-width:420px) {
    .bhdp-benefits,
    .bhdp-info-grid,
    .bhdp-related-grid { grid-template-columns:1fr; }

    .bhdp-related-image { height:230px; }
}


/* ==========================================================
   V1.0.4 OVERRIDES
   ========================================================== */

/* Real WhatsApp icon */
.bhdp-wa-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    flex: 0 0 18px;
}
.bhdp-wa-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.bhdp-btn-whatsapp {
    gap: 8px;
}

/* Related products improved */
.bhdp-related-head h2 {
    color: #000 !important;
}

.bhdp-related-card {
    justify-content: flex-start;
}

.bhdp-related-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.bhdp-related-category {
    margin-top: 12px;
    color: var(--bh-orange-dark);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.bhdp-related-title {
    color: #111827 !important;
    font-size: 16px;
    line-height: 1.42;
    font-weight: 700;
    min-height: 48px;
    margin-top: 8px;
    -webkit-line-clamp: 2;
}

.bhdp-related-desc {
    margin-top: 10px;
    color: #667684;
    font-size: 13px;
    line-height: 1.6;
    min-height: 42px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bhdp-related-quote {
    margin-top: 16px;
}

@media (max-width: 640px) {
    .bhdp-related-title {
        font-size: 14px;
        min-height: 44px;
    }
    .bhdp-related-desc {
        font-size: 12px;
        min-height: 38px;
    }
}


/* ==========================================================
   V1.0.5 OVERRIDES
   ========================================================== */

/* Main product image area should remain white/clean */
.bhdp-main-image {
    background: #ffffff !important;
    border: 1px solid #e7edf2 !important;
}

/* Keep the product image on a clean white canvas */
.bhdp-main-image > img {
    background: transparent !important;
}

/* Gallery zoom / expand button */
.bhdp-zoom {
    width: 48px !important;
    height: 48px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #f7940a !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(247, 148, 10, .24) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.bhdp-zoom:hover,
.bhdp-zoom:focus-visible {
    background: #ef7900 !important;
    color: #ffffff !important;
}

.bhdp-zoom-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.bhdp-zoom-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Final related-products behaviour: grid on desktop, touch carousel on responsive screens. */
.bhdp-related-quote {
    border:1px solid #f7940a!important;
    border-radius:3px!important;
    background:#f7940a!important;
    color:#fff!important;
    box-shadow:none!important;
}
.bhdp-related-quote:hover,
.bhdp-related-quote:focus-visible {
    border-color:#dd7800!important;
    background:#dd7800!important;
    color:#fff!important;
}
@media (min-width: 961px) {
    .bhdp-related-carousel { position:static!important; }
    .bhdp-related-grid {
        display:grid!important;
        grid-template-columns:repeat(4,minmax(0,1fr))!important;
        gap:16px!important;
        overflow:visible!important;
        padding:0!important;
    }
    .bhdp-related-card { flex:none!important; }
    .bhdp-related-arrow { display:none!important; }
}
@media (max-width: 960px) {
    .bhdp-related-carousel { position:relative!important; }
    .bhdp-related-grid {
        display:flex!important;
        grid-template-columns:none!important;
        gap:12px!important;
        overflow-x:auto!important;
        padding:1px 2px 8px!important;
        scroll-snap-type:x mandatory!important;
        scrollbar-width:none;
    }
    .bhdp-related-grid::-webkit-scrollbar { display:none; }
    .bhdp-related-card { flex:0 0 72%!important; scroll-snap-align:start; }
    .bhdp-related-arrow { display:none!important; }
}

@media (max-width: 640px) {
    .bhdp-zoom {
        width: 42px !important;
        height: 42px !important;
        top: 12px !important;
        right: 12px !important;
    }

    .bhdp-zoom-icon,
    .bhdp-zoom-icon svg {
        width: 18px;
        height: 18px;
    }
}