/* CreativeBaz Print Manager — Frontend CSS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ─────────────────────────────────────────────────────────────
     CreativeBaz Brand Design Tokens — Plugin Hardcoded Defaults
     Primary Sky Blue  : #3AADE4  (extracted from logo)
     Hover  / Deep Blue: #2B8CB8
     Sky Blue Tint     : #E8F6FC
     Charcoal (heading): #1E2022
     ───────────────────────────────────────────────────────────── */

  /* Dynamic — can be overridden via plugin Settings panel */
  --cbpm-primary:       var(--cbpm-theme-color,       #3AADE4);
  --cbpm-primary-rgb:   var(--cbpm-theme-color-rgb,   58, 173, 228);
  --cbpm-button-bg:     var(--cbpm-button-color,      #3AADE4);
  --cbpm-button-hover:  var(--cbpm-button-color-hover,#2B8CB8);

  /* CreativeBaz Brand Palette */
  --cbpm-primary-dark:  #2B8CB8;    /* Hover / deep gradient     */
  --cbpm-primary-light: #E8F6FC;    /* Tinted background / pills */
  --cbpm-dark:          #1E2022;    /* Charcoal — headings       */
  --cbpm-navy:          #1a3a6b;    /* Dark gradient end         */
  --cbpm-text:          var(--cbpm-text-color, #1E2022);
  --cbpm-muted:         #64748b;
  --cbpm-border:        #e2e8f0;
  --cbpm-bg:            #f4f7ff;
  --cbpm-bg-2:          #E8F6FC;
  --cbpm-white:         #ffffff;
  --cbpm-success:       #16a34a;
  --cbpm-warning:       #f59e0b;
  --cbpm-error:         #ef4444;
  --cbpm-radius:        12px;       /* Uniform card border-radius */
  --cbpm-radius-lg:     16px;
  --cbpm-shadow:        0 4px 20px rgba(58, 173, 228, 0.08);
  --cbpm-shadow-lg:     0 10px 40px rgba(58, 173, 228, 0.15);
  --cbpm-font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cbpm-transition:    0.22s ease;
  --cbpm-container-width: var(--cbpm-max-width, 1200px);
}

.cbpm-container { max-width: var(--cbpm-container-width); margin: 0 auto; padding: 0 20px; }

/* ============================================================
   GLOBAL BOX-SIZING & OVERFLOW RESET
   Applied to ALL plugin components
   ============================================================ */
.cbpm-container,
.cbpm-container *,
.cbpm-single-product-v2,
.cbpm-single-product-v2 *,
.cbpm-archive-page,
.cbpm-archive-page *,
.cbpm-shop-layout,
.cbpm-shop-layout *,
.cbpm-ef-modal-box,
.cbpm-ef-modal-box * {
    box-sizing: border-box;
}
/* Prevent horizontal scroll on plugin pages */
.cbpm-single-product-v2,
.cbpm-archive-page {
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
}
/* All images responsive by default */
.cbpm-single-product-v2 img,
.cbpm-archive-page img,
.cbpm-container img {
    max-width: 100%;
    height: auto;
}



/* Archive Page */
.cbpm-archive-page { padding: 48px 0 80px; font-family: var(--cbpm-font); }
.cbpm-archive-header { text-align: center; margin-bottom: 40px; }
.cbpm-archive-header h1 { font-size: 2.4em; font-weight: 800; color: var(--cbpm-dark); margin: 0 0 12px; }
.cbpm-archive-header p { font-size: 1.05em; color: var(--cbpm-muted); margin: 0 0 16px; }
.cbpm-product-count { display: inline-block; background: var(--cbpm-dark); color: #fff; padding: 4px 16px; border-radius: 50px; font-size: 0.85em; font-weight: 600; }

/* Category Filter */
.cbpm-category-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; }
.cbpm-cat-pill { padding: 8px 20px; border-radius: 50px; border: 2px solid var(--cbpm-border); color: var(--cbpm-text); font-size: 0.88em; font-weight: 600; text-decoration: none; transition: all var(--cbpm-transition); }
.cbpm-cat-pill:hover, .cbpm-cat-pill.active { background: var(--cbpm-primary); border-color: var(--cbpm-primary); color: #fff; }
.cbpm-cat-pill { transition: all var(--cbpm-transition); }

/* Products Grid & Sidebar Layout */
.cbpm-shop-layout { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; }
.cbpm-shop-sidebar { background: #fff; border: 1px solid #e2e8f0; border-radius: var(--cbpm-radius); padding: calc(var(--cbpm-spacing) * 1.5); position: sticky; top: 24px; box-shadow: var(--cbpm-shadow); }
.cbpm-filter-widget { margin-bottom: 24px; }
.cbpm-filter-widget:last-child { margin-bottom: 0; }
.cbpm-filter-title { font-size: 1.1em; font-weight: 700; color: #0f172a; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid #e2e8f0; }
.cbpm-filter-options { display: flex; flex-direction: column; gap: 12px; }

.cbpm-filter-label { display: flex; align-items: center; gap: 8px; font-size: 0.95em; color: #475569; cursor: pointer; transition: color 0.2s; }
.cbpm-filter-label:hover { color: var(--cbpm-primary); }
.cbpm-filter-label input[type="checkbox"] { width: 16px; height: 16px; border-radius: 4px; border: 1px solid #cbd5e1; accent-color: var(--cbpm-primary); cursor: pointer; }
.cbpm-filter-label span { color: #94a3b8; font-size: 0.85em; margin-left: auto; }

.cbpm-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: calc(var(--cbpm-spacing) * 1.5); }

/* Product Card V2 (Matches Uploaded UI) */
.cbpm-product-card-v2 { position: relative; background: transparent; border-radius: 0; border: none; box-shadow: none; overflow: visible; transition: transform var(--cbpm-transition); display: flex; flex-direction: column; }
.cbpm-product-card-v2:hover { transform: translateY(-4px); box-shadow: none; }
.cbpm-card-img-link { display: block; text-decoration: none; flex-shrink: 0; border-radius: 16px; overflow: hidden; }
.cbpm-card-image-wrap { position: relative; aspect-ratio: 1/1; background: #f8fafc; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 16px; }
.cbpm-card-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; mix-blend-mode: multiply; }
.cbpm-product-card-v2:hover .cbpm-card-image-wrap img { transform: scale(1.05); }

/* Favorites Button — Elementor/theme reset + plugin styles */
.cbpm-fav-btn { position: absolute !important; top: 12px !important; right: 12px !important; z-index: 10 !important; background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 50% !important; width: 36px !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; color: transparent !important; transition: all 0.2s !important; box-shadow: none !important; padding: 0 !important; outline: none !important; }
.cbpm-fav-btn svg { width: 75% !important; height: 75% !important; transition: all 0.2s !important; fill: rgba(0,0,0,0.15) !important; stroke: none !important; }
.cbpm-fav-btn:hover { transform: scale(1.15) !important; background: transparent !important; background-color: transparent !important; }
.cbpm-fav-btn:hover svg { fill: rgba(0,0,0,0.3) !important; }
.cbpm-fav-btn.active svg { fill: #000 !important; stroke: none !important; }

.cbpm-card-no-img { font-size: 3em; color: #ddd; }
.cbpm-card-content { padding: var(--cbpm-card-padding, 12px); flex: 1; display: flex; flex-direction: column; gap: var(--cbpm-card-line-gap, 4px); background: transparent; }
.cbpm-card-title-link { text-decoration: none !important; color: #0f172a; display: block; }
.cbpm-card-title-link:hover, .cbpm-card-title-link:focus, .cbpm-card-title-link:active { text-decoration: none !important; }
.cbpm-card-heading { text-decoration: none !important; font-size: clamp(0.95rem, 1vw + 0.4rem, 1.15rem); font-weight: 500; margin: 0; color: #0f172a; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cbpm-card-desc { font-size: clamp(0.8rem, 1vw + 0.3rem, 0.9rem); color: #64748b; line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cbpm-card-price-row { font-size: clamp(0.85rem, 1vw + 0.4rem, 0.95rem); display: flex; align-items: center; gap: 4px; color: #0f172a; }
.cbpm-price-label { color: #0f172a; font-weight: 400; font-size: 1em; }
.cbpm-price-amount { color: #0f172a; font-weight: 400; font-size: 1em; }
.cbpm-card-cat-link { margin-top: auto; padding-top: 6px; }
.cbpm-card-cat-link a { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85em; font-weight: 600; color: #64748b; text-decoration: none; }
.cbpm-card-cat-link a:hover { text-decoration: underline; color: #0f172a; }
.cbpm-arrow { font-size: 1em; line-height: 1; }

/* Category Card V2 (Matches Uploaded Category UI) */
.cbpm-category-card-v2 { background: var(--cbpm-white); border-radius: var(--cbpm-radius); border: 1px solid rgba(0,0,0,0.06); box-shadow: var(--cbpm-shadow); overflow: hidden; transition: transform var(--cbpm-transition), box-shadow var(--cbpm-transition); display: flex; flex-direction: column; }
.cbpm-category-card-v2:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(58,173,228,0.12); }
.cbpm-cat-img-link { display: block; text-decoration: none; }
.cbpm-cat-image-wrap { position: relative; aspect-ratio: 1/1; background: #f8fafc; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(0,0,0,0.04); overflow: hidden; }
.cbpm-cat-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; mix-blend-mode: multiply; }
.cbpm-category-card-v2:hover .cbpm-cat-image-wrap img { transform: scale(1.05); }
.cbpm-cat-content { padding: 20px 24px; flex: 1; display: flex; flex-direction: column; background: #fff; }
.cbpm-cat-title-link { text-decoration: none; color: var(--cbpm-dark); display: block; margin-bottom: 8px; }
.cbpm-cat-title-wrap { display: flex; align-items: center; gap: 8px; }
.cbpm-cat-icon { color: var(--cbpm-primary); display: flex; align-items: center; justify-content: center; }
.cbpm-cat-heading { font-size: 1.15em; font-weight: 700; margin: 0; color: var(--cbpm-dark); line-height: 1.2; }
.cbpm-cat-desc { font-size: 0.9em; color: #6b7280; line-height: 1.5; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cbpm-cat-link-row a { display: inline-flex; align-items: center; gap: 4px; font-size: 0.95em; font-weight: 700; color: var(--cbpm-primary); text-decoration: none; }
.cbpm-cat-link-row a:hover { text-decoration: underline; color: var(--cbpm-primary-dark); }

.cbpm-no-products { text-align: center; padding: 80px 20px; color: var(--cbpm-muted); }
.cbpm-no-products span { font-size: 3em; }
.cbpm-archive-pagination { text-align: center; margin-top: 48px; }
.cbpm-archive-pagination .page-numbers { display: inline-block; padding: 8px 16px; margin: 2px; border: 2px solid var(--cbpm-border); border-radius: 8px; color: var(--cbpm-text); text-decoration: none; font-weight: 600; }
.cbpm-archive-pagination .page-numbers.current,
.cbpm-archive-pagination .page-numbers:hover { background: var(--cbpm-primary); border-color: var(--cbpm-primary); color: #fff; }

/* Carousel Styles */
.cbpm-carousel-section { width: 100%; overflow: hidden; } /* prevent horizontal scroll */
.cbpm-carousel-wrapper { position: relative; display: flex; align-items: center; width: 100%; max-width: 100%; overflow: visible; padding: 20px 0; box-sizing: border-box; }
.cbpm-carousel-nav { position: absolute; top: 40%; transform: translateY(-50%); background: rgba(0,0,0,0.1) !important; border: none !important; width: 40px; height: 45px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important; border-radius: 0 !important; display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 400; font-size: 24px; color: #000 !important; z-index: 10; transition: all 0.2s; box-shadow: none !important; flex-shrink: 0; outline: none !important;
    min-width: 40px; min-height: 45px; touch-action: manipulation; }
.cbpm-carousel-nav.prev { left: -15px; }
.cbpm-carousel-nav.next { right: -15px; }
.cbpm-carousel-nav:hover { transform: translateY(-50%) scale(1.08); background: rgba(0,0,0,0.15) !important; color: #000 !important; }
.cbpm-carousel-track-container { flex: 1; overflow: hidden; min-width: 0; }
.cbpm-carousel-track { display: flex; gap: var(--cbpm-carousel-gap, 16px); transition: transform 0.4s ease; }
/* 5 columns layout default fallback, actual calculation is in dynamic CSS */
.cbpm-carousel-track > div { flex: 0 0 calc(20% - 13px); min-width: 0; }

/* ═══════════════════════════════════════════
   SINGLE PRODUCT PAGE — Full Responsive
   ═══════════════════════════════════════════ */
.cbpm-single-product-v2 {
    padding: 32px 0 80px;
    font-family: var(--cbpm-font);
    color: var(--cbpm-dark);
    overflow-x: hidden; /* prevent any child overflow on mobile */
    width: 100%;
    box-sizing: border-box;
    word-break: break-word; /* ensure long words break */
    max-width: 100vw;
}

.cbpm-single-product-v2 *,
.cbpm-single-product-v2 *::before,
.cbpm-single-product-v2 *::after {
    box-sizing: border-box;
}

/* Breadcrumb */
.cbpm-breadcrumb-v2 { font-size: var(--cbpm-sp-bc-size, 0.82em); font-family: var(--cbpm-sp-bc-font, inherit); color: var(--cbpm-sp-bc-color, #6b7280); margin-bottom: 20px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbpm-breadcrumb-v2 a { color: var(--cbpm-sp-bc-color, #6b7280); text-decoration: none; }
.cbpm-breadcrumb-v2 a:hover { text-decoration: underline; }

/* Top Grid — 2 col desktop, 1 col mobile */
.cbpm-sp-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 48px;
    width: 100%;
    min-width: 0;
}

/* Main Image Box */
.cbpm-sp-main-img-box {
    position: relative;
    background: #f8fafc;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e8ecf4;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.cbpm-sp-main-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    max-width: 100%;
}

/* Badge — wrap instead of overflow */
.cbpm-badge-highlight {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--cbpm-sp-badge-bg, #22c55e);
    color: var(--cbpm-sp-badge-color, #fff);
    font-family: var(--cbpm-sp-badge-font, inherit);
    font-size: var(--cbpm-sp-badge-size, 0.75rem);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.78em;
    font-weight: 700;
    z-index: 10;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: calc(100% - 64px); /* Leave space for wishlist button */
}

/* Thumbnails */
.cbpm-sp-thumbnails-wrap { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; width: 100%; min-width: 0; }
.cbpm-thumb-nav { background: rgba(0,0,0,0.1) !important; border: none !important; width: 40px !important; height: 45px !important; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important; border-radius: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; font-weight: 400 !important; font-size: 24px !important; color: #000 !important; flex-shrink: 0 !important; transition: all 0.2s !important; padding: 0 !important; line-height: 1 !important; box-shadow: none !important; outline: none !important; }
.cbpm-thumb-nav:hover { transform: scale(1.1) !important; background: rgba(0,0,0,0.15) !important; }
.cbpm-thumb-track-container { flex: 0 1 auto; overflow: hidden; min-width: 0; }
.cbpm-thumb-track { display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 4px; scrollbar-width: none; }
.cbpm-thumb-track::-webkit-scrollbar { display: none; }
.cbpm-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; background: #f8fafc; padding: 3px; flex-shrink: 0; }
.cbpm-thumb.active { border-color: var(--cbpm-primary); background: #fff; }

/* Info Column */
.cbpm-sp-info-col { min-width: 0; width: 100%; box-sizing: border-box; }
.cbpm-sp-cat-label { font-size: var(--cbpm-sp-cat-size, 0.82em); font-family: var(--cbpm-sp-cat-font, inherit); font-weight: 600; color: var(--cbpm-sp-cat-color, var(--cbpm-primary)); background: var(--cbpm-sp-cat-bg, var(--cbpm-primary-light)); display: inline-block; padding: 4px 10px; border-radius: 4px; margin-bottom: 10px; }
.cbpm-sp-title,
h1.cbpm-sp-title {
    font-family: var(--cbpm-sp-title-font, inherit) !important;
    font-size: var(--cbpm-sp-title-size, clamp(calc(var(--cbpm-font-size) * 1.5), 5vw, calc(var(--cbpm-font-size) * 2.2))) !important;
    color: var(--cbpm-sp-title-color, #0a1628) !important;
    font-weight: var(--cbpm-sp-title-weight, 800) !important;
    margin: 0 0 8px;
    line-height: 1.2;
    word-break: break-word;
    overflow-wrap: break-word;
}
.cbpm-sp-subtitle {
    font-family: var(--cbpm-sp-subtitle-font, inherit);
    font-size: var(--cbpm-sp-subtitle-size, clamp(calc(var(--cbpm-font-size) * 0.9), 2vw, calc(var(--cbpm-font-size) * 1.15)));
    color: var(--cbpm-sp-subtitle-color, #4b5563);
    font-weight: 500;
    margin-bottom: 14px;
    word-break: break-word;
}

/* Features / Highlights */
.cbpm-sp-features-row { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #e2e8f0; }
.cbpm-sp-features-row span { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: var(--cbpm-sp-feat-size, 0.88em) !important; color: var(--cbpm-sp-feat-color, #64748b) !important; font-weight: 500 !important; }
.cbpm-sp-features-row svg { color: var(--cbpm-sp-feat-color, var(--cbpm-primary)) !important; flex-shrink: 0; width: 1.1em; height: 1.1em; }

/* Rating */
.cbpm-sp-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.cbpm-rating-number { font-size: 1.05em; font-weight: 700; color: #0f172a; }
.cbpm-stars { font-size: 1em; color: #fbbf24; }

/* Price */
.cbpm-sp-price {
    font-family: var(--cbpm-sp-price-font, inherit);
    font-size: var(--cbpm-sp-price-size, clamp(calc(var(--cbpm-font-size) * 1.1), 3vw, calc(var(--cbpm-font-size) * 1.3)));
    color: var(--cbpm-sp-price-color, #0f172a);
    font-weight: 400;
    margin-bottom: 20px;
    word-break: break-word;
    overflow-wrap: break-word;
}
.cbpm-sp-price span {
    font-size: 1em;
    color: var(--cbpm-sp-price-amt-color, var(--cbpm-primary));
    font-weight: 800;
    margin-left: 4px;
}
.cbpm-sp-custom-price {
    font-size: var(--cbpm-sp-note-size, calc(var(--cbpm-font-size) * 0.9));
    font-family: var(--cbpm-sp-note-font, inherit);
    color: var(--cbpm-sp-note-color, #64748b);
    margin-top: 6px;
    line-height: 1.5;
}

/* Details Table */
.cbpm-sp-table-wrap { margin-bottom: 28px; border-radius: 8px; border: 1px solid #e2e8f0; overflow: hidden; width: 100%; }
.cbpm-sp-table { width: 100%; border-collapse: collapse; font-family: var(--cbpm-sp-table-font, inherit); font-size: var(--cbpm-sp-table-size, 0.92em); table-layout: fixed; word-break: break-word; }
.cbpm-sp-table th, .cbpm-sp-table td { padding: 11px 14px; border-bottom: 1px solid #e2e8f0; text-align: left; vertical-align: top; }
.cbpm-sp-table th { background: #f8fafc; font-weight: 600; color: #475569; width: 38%; border-right: 1px solid #e2e8f0; }
.cbpm-sp-table td { color: var(--cbpm-sp-table-color, #1e293b); font-weight: 500; }
.cbpm-sp-table tr:last-child th, .cbpm-sp-table tr:last-child td { border-bottom: none; }

/* Action Buttons */
.cbpm-sp-actions { display: flex; gap: 12px; width: 100%; }
.cbpm-btn-chat {
    flex: 1;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 13px 12px !important;
    background: var(--cbpm-sp-chat-bg, #22c55e) !important;
    background-color: var(--cbpm-sp-chat-bg, #22c55e) !important;
    color: var(--cbpm-sp-chat-color, #fff) !important;
    font-family: var(--cbpm-sp-chat-font, inherit) !important;
    font-weight: 700 !important;
    font-size: var(--cbpm-sp-chat-size, clamp(calc(var(--cbpm-font-size) * 0.9), 2vw, var(--cbpm-font-size))) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    border: none !important;
    cursor: pointer !important;
    min-width: 0;
    white-space: nowrap !important;
    box-shadow: none !important;
    outline: none !important;
}
.cbpm-btn-chat:hover { background: var(--cbpm-sp-chat-bg-hover, #16a34a) !important; background-color: var(--cbpm-sp-chat-bg-hover, #16a34a) !important; transform: translateY(-2px) !important; color: var(--cbpm-sp-chat-color, #fff) !important; }
.cbpm-btn-estimate {
    flex: 1;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 13px 12px !important;
    background: var(--cbpm-sp-est-bg, var(--cbpm-primary)) !important;
    background-color: var(--cbpm-sp-est-bg, var(--cbpm-primary)) !important;
    color: var(--cbpm-sp-est-color, #fff) !important;
    font-family: var(--cbpm-sp-est-font, inherit) !important;
    font-weight: 700 !important;
    font-size: var(--cbpm-sp-est-size, clamp(calc(var(--cbpm-font-size) * 0.9), 2vw, var(--cbpm-font-size))) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    border: none !important;
    cursor: pointer !important;
    min-width: 0;
    white-space: nowrap !important;
    box-shadow: none !important;
    outline: none !important;
}
.cbpm-btn-estimate:hover { background: var(--cbpm-sp-est-bg-hover, var(--cbpm-button-hover)) !important; background-color: var(--cbpm-sp-est-bg-hover, var(--cbpm-button-hover)) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(var(--cbpm-primary-rgb),0.3) !important; color: var(--cbpm-sp-est-color, #fff) !important; }

/* Bottom Grid */
.cbpm-sp-bottom-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; margin-bottom: 64px; align-items: start; }
.cbpm-sp-bottom-grid h3 { font-size: 1.2em; font-weight: 800; margin: 0 0 14px; border-bottom: 2px solid #f1f5f9; padding-bottom: 10px; }

/* 60/40 split for description + reviews */
.cbpm-sp-bottom-split { grid-template-columns: 3fr 2fr !important; gap: 28px; align-items: stretch; }

/* Description column — card to match reviews height */
.cbpm-sp-desc-col { background: #fff; border-radius: 14px; border: 1px solid #e2e8f0; padding: 16px 18px; box-shadow: 0 2px 12px rgba(26,86,219,0.05); display: flex; flex-direction: column; }
.cbpm-sp-desc-col h3 { margin: 0 0 10px !important; border-bottom: 1.5px solid #f1f5f9 !important; padding-bottom: 10px !important; font-size: 1em !important; }

/* Reviews Box */
.cbpm-sp-reviews-col { display: flex; flex-direction: column; }
.cbpm-reviews-box { background: #fff; border-radius: 14px; border: 1px solid #e2e8f0; padding: 12px 14px; box-shadow: 0 2px 12px rgba(26,86,219,0.05); height: 100%; }
.cbpm-reviews-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1.5px solid #f1f5f9; flex-wrap: wrap; }
.cbpm-reviews-header svg { color: #f59e0b; flex-shrink: 0; }
.cbpm-reviews-header h3 { margin: 0; font-size: 0.95em; font-weight: 800; color: #0a1628; border: none; padding: 0; }
.cbpm-reviews-avg { margin-left: auto; font-size: 0.78em; font-weight: 700; color: #f59e0b; background: #fff9ee; border: 1px solid #fde68a; border-radius: 20px; padding: 2px 9px; }

/* Review list — compact */
.cbpm-reviews-list { display: flex; flex-direction: column; gap: 1px; overflow: hidden; transition: max-height 0.4s ease; }
.cbpm-reviews-list.collapsed { max-height: 240px; }

/* Single review card — ultra compact */
.cbpm-review-item { display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; background: #f8fafc; border-radius: 6px; transition: background 0.15s; }
.cbpm-review-item:hover { background: #f0f5ff; }
.cbpm-review-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; color: #fff; flex-shrink: 0; }
.cbpm-review-body { flex: 1; min-width: 0; }
.cbpm-review-meta { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 2px; }
.cbpm-review-name { font-size: 0.78em; font-weight: 700; color: #0a1628; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.cbpm-review-stars { display: flex; align-items: center; gap: 1px; flex-shrink: 0; }
.cbpm-review-text { margin: 0; font-size: 0.76em; color: #64748b; line-height: 1.4; font-style: italic; }

/* Empty state */
.cbpm-reviews-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 12px; text-align: center; gap: 6px; color: #94a3b8; }
.cbpm-reviews-empty p { margin: 0; font-size: 0.82em; }

/* Centered See More button wrapper */
.cbpm-see-more-wrap { display: flex; justify-content: center; padding: 14px 0 0; }


.cbpm-sp-desc-content { font-family: var(--cbpm-sp-desc-font, inherit); font-size: var(--cbpm-sp-desc-size, var(--cbpm-font-size, 0.93em)); color: var(--cbpm-sp-desc-color, #475569); line-height: var(--cbpm-line-height, 1.7); position: relative; overflow: hidden; transition: max-height 0.3s ease; word-break: break-word; }
.cbpm-sp-desc-content.collapsed { max-height: 140px; }
.cbpm-sp-desc-content.collapsed::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(transparent, #fff); }
.cbpm-sp-desc-content img, .cbpm-sp-desc-content video, .cbpm-sp-desc-content iframe { max-width: 100% !important; height: auto !important; }
.cbpm-sp-desc-content table, .cbpm-sp-desc-content pre { max-width: 100%; overflow-x: auto; display: block; }
.cbpm-btn-see-more { background: #fff !important; background-color: #fff !important; border: 1.5px solid #000 !important; color: #000 !important; padding: 7px 26px !important; border-radius: 20px !important; font-size: 10pt !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.2s !important; outline: none !important; box-shadow: none !important; }
.cbpm-btn-see-more:hover { background: #f8fafc !important; background-color: #f8fafc !important; color: #000 !important; border-color: #000 !important; transform: translateY(-1px) !important; }

.cbpm-sp-help-col p { font-size: 0.93em; color: #475569; margin-bottom: 14px; line-height: 1.6; }
.cbpm-btn-talk { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 2px solid var(--cbpm-primary); color: var(--cbpm-primary); font-weight: 700; border-radius: 8px; text-decoration: none; transition: all 0.2s; }
.cbpm-btn-talk:hover { background: var(--cbpm-primary); color: #fff; }

.cbpm-sp-why-us-col { background: #fefce8; padding: calc(var(--cbpm-spacing) * 1.2); border-radius: 12px; border: 1px solid #fef08a; }
.cbpm-sp-why-us-col h3 { border-bottom-color: #fde047; }
.cbpm-why-list { list-style: none; padding: 0; margin: 0; }
.cbpm-why-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92em; color: #0f172a; margin-bottom: 12px; font-weight: 500; line-height: 1.4; }
.cbpm-why-list li:last-child { margin-bottom: 0; }

/* Popular Products Section — must not overflow */
.cbpm-sp-popular-section { overflow: hidden; width: 100%; }
.cbpm-sp-popular-section h2 { text-align: center; font-size: clamp(1.3em, 4vw, 2em); font-weight: 800; margin-bottom: 24px; }
.cbpm-sp-popular-section .cbpm-wrapper { max-width: 100%; overflow: hidden; }
.cbpm-sp-popular-section .cbpm-carousel-wrapper { max-width: 100% !important; }

/* ── Single Product: Tablet (992px) ── */
@media (max-width: 992px) {
  .cbpm-sp-top-grid { grid-template-columns: 1fr; gap: 20px; margin-bottom: 28px; }
  .cbpm-sp-bottom-grid { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
  .cbpm-sp-bottom-split { grid-template-columns: 1fr !important; }
  .cbpm-sp-main-img-box { max-width: 460px; margin: 0 auto; }
  .cbpm-sp-info-col { padding: 0; }
}

/* ── Single Product: Mobile (768px) ── */
@media (max-width: 768px) {
  .cbpm-single-product-v2 { padding: 16px 0 50px; }
  .cbpm-sp-top-grid { gap: 16px; }
  .cbpm-sp-main-img-box { max-width: 100%; border-radius: 12px; }
  .cbpm-btn-see-more { font-size: 8pt; }

  /* Title & subtitle smaller on mobile */
  .cbpm-sp-title { font-size: var(--cbpm-sp-title-size, clamp(calc(var(--cbpm-font-size) * 1.3), 6vw, calc(var(--cbpm-font-size) * 1.8))); }
  .cbpm-sp-subtitle { font-size: var(--cbpm-sp-subtitle-size, calc(var(--cbpm-font-size) * 0.9)); }
  .cbpm-sp-price { font-size: var(--cbpm-sp-price-size, calc(var(--cbpm-font-size) * 1.1)); margin-bottom: 14px; font-weight: 400; }
  .cbpm-sp-price span { font-size: 1em; }

  /* Buttons stacked */
  .cbpm-sp-actions { flex-direction: column; gap: 10px; margin-top: 15px; }
  .cbpm-sp-actions .cbpm-btn-chat { width: 100%; font-size: var(--cbpm-sp-chat-size, calc(var(--cbpm-font-size) * 0.95)); justify-content: center; }
  .cbpm-sp-actions .cbpm-btn-estimate { width: 100%; font-size: var(--cbpm-sp-est-size, calc(var(--cbpm-font-size) * 0.95)); justify-content: center; }

  /* Features row inline on mobile with scaling font */
  .cbpm-sp-features-row { flex-direction: row; flex-wrap: wrap; gap: 8px 12px; }
  .cbpm-sp-features-row span { font-size: var(--cbpm-sp-feat-size, clamp(0.75rem, 3vw, 0.88rem)) !important; }

  /* Table: stack on mobile */
  .cbpm-sp-table-wrap { overflow: hidden; }
  .cbpm-sp-table { table-layout: fixed; }
  .cbpm-sp-table th { width: 42%; font-size: var(--cbpm-sp-table-size, 0.82em); }
  .cbpm-sp-table td { font-size: var(--cbpm-sp-table-size, 0.82em); }
  .cbpm-sp-table th, .cbpm-sp-table td { padding: 9px 10px; }

  /* Thumbnails smaller */
  .cbpm-thumb { width: 52px; height: 52px; }

  /* Bottom grid */
  .cbpm-sp-bottom-grid h3 { font-size: 1.05em; }
}

/* =========================================================================
   Modern Form UI & Global Modal (Pop-up)
   ========================================================================= */

/* Global Modal Styles */
.cbpm-modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.cbpm-modal-overlay.cbpm-modal-show { opacity: 1; visibility: visible; }
.cbpm-modal-box { background: #fff; width: 90%; max-width: 800px; max-height: 90vh; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); display: flex; flex-direction: column; transform: translateY(20px); transition: transform 0.3s ease; position: relative; }
.cbpm-modal-show .cbpm-modal-box { transform: translateY(0); }
.cbpm-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #e2e8f0; }
.cbpm-modal-header h2 { margin: 0; font-size: 1.5em; font-weight: 800; color: #0f172a; }
.cbpm-modal-close { background: #f1f5f9; border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 1.2em; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #64748b; transition: all 0.2s; }
.cbpm-modal-close:hover { background: #e2e8f0; color: #ef4444; }
.cbpm-modal-body { padding: calc(var(--cbpm-spacing) * 1.5); overflow-y: auto; flex: 1; }
.cbpm-modal-body::-webkit-scrollbar { width: 6px; }
.cbpm-modal-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* Trigger Button */
.cbpm-modal-trigger-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; background: var(--cbpm-primary); color: #fff; font-size: 1.05em; font-weight: 700; border-radius: 8px; border: none; cursor: pointer; transition: all 0.2s; font-family: var(--cbpm-font); }
.cbpm-modal-trigger-btn:hover { background: var(--cbpm-button-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--cbpm-primary-rgb),0.3); }

/* Modern Form Elements */
.cbpm-modern-form { font-family: var(--cbpm-font); }
.cbpm-form-intro { text-align: center; margin-bottom: 32px; }
.cbpm-form-intro h2 { font-size: 2em; font-weight: 800; color: #0f172a; margin: 0 0 8px; }
.cbpm-form-intro p { font-size: 0.95em; color: #64748b; margin: 0; }

.cbpm-form-section { margin-bottom: 32px; }
.cbpm-section-title { display: flex; align-items: center; gap: 12px; font-size: 1.15em; font-weight: 700; color: #0f172a; margin-bottom: 20px; position: relative; }
.cbpm-section-title::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; margin-left: 8px; }
.cbpm-section-icon { width: 32px; height: 32px; background: #eff6ff; color: #1a73e8; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.cbpm-autofill-notice { display: flex; align-items: center; gap: 12px; background: #e3f2fd; border: 1px solid #b3e5fc; border-radius: 8px; padding: 14px 18px; margin-bottom: 24px; font-size: 0.9em; }
.cbpm-form-row { display: grid; gap: var(--cbpm-spacing); margin-bottom: 16px; }
.cbpm-form-row.two-col { grid-template-columns: 1fr 1fr; }
.cbpm-form-row.three-col { grid-template-columns: 1fr 1fr 1fr; }
.cbpm-field label { display: block; font-weight: 600; font-size: 0.88em; color: #334155; margin-bottom: 6px; }
.cbpm-req { color: #ef4444; }
.cbpm-field input, .cbpm-field select, .cbpm-field textarea { width: 100%; padding: 12px 14px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 0.94em; font-family: var(--cbpm-font); color: #0f172a; background: #fff; transition: all 0.2s; box-sizing: border-box; }
.cbpm-field input:focus, .cbpm-field select:focus, .cbpm-field textarea:focus { outline: none; border-color: #1a73e8; box-shadow: 0 0 0 3px rgba(26,115,232,0.15); }
.cbpm-field input::placeholder, .cbpm-field textarea::placeholder { color: #94a3b8; }

/* File Upload (Drag & Drop UI) */
.cbpm-file-upload { position: relative; }
.cbpm-file-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; }
.cbpm-file-upload-ui { border: 2px dashed #94a3b8; border-radius: 12px; padding: calc(var(--cbpm-spacing) * 1.5); text-align: center; cursor: pointer; transition: all 0.2s; background: #f8fafc; }
.cbpm-file-upload:hover .cbpm-file-upload-ui { border-color: #1a73e8; background: #eff6ff; }
.cbpm-file-upload-ui svg { color: #1a73e8; margin-bottom: 8px; }
.cbpm-file-upload-ui p { margin: 0 0 4px; font-weight: 600; font-size: 0.95em; color: #0f172a; }
.cbpm-file-upload-ui small { color: #64748b; font-size: 0.8em; }
.cbpm-file-name { font-size: 0.82em; color: #10b981; margin-top: 8px; font-weight: 600; display: block; }

/* Buttons */
.cbpm-form-submit { text-align: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid #e2e8f0; }
.cbpm-submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: var(--cbpm-spacing); background: var(--cbpm-primary); color: #fff; border: none; border-radius: var(--cbpm-radius); font-size: 1.05em; font-weight: 700; cursor: pointer; transition: all 0.2s; font-family: var(--cbpm-font); }
.cbpm-submit-btn:hover { background: var(--cbpm-button-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(58,173,228,0.30); }
.cbpm-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.cbpm-submit-note { font-size: 0.82em; color: #64748b; margin-top: 12px; display: flex; justify-content: center; align-items: center; gap: 6px; }

/* Success Message */
.cbpm-success-message { text-align: center; padding: 48px 32px; background: #f0fdf4; border-radius: 12px; border: 1px solid #bbf7d0; }
.cbpm-success-icon { font-size: 3em; margin-bottom: 16px; }
.cbpm-success-message h3 { color: #166534; font-size: 1.5em; margin: 0 0 8px; }
.cbpm-success-message p { color: #15803d; font-size: 1em; margin: 0; }

@media (max-width: 768px) {
    .cbpm-form-row.two-col, .cbpm-form-row.three-col { grid-template-columns: 1fr; }
    .cbpm-modal-box { width: 95%; height: 95vh; max-height: 95vh; }
}

.cbpm-btn-outline-dark { display: inline-block; margin-top: 16px; padding: 10px 24px; border: 2px solid var(--cbpm-dark); color: var(--cbpm-dark); border-radius: 8px; font-weight: 600; cursor: pointer; background: transparent; font-family: var(--cbpm-font); }

/* Responsive */
@media (max-width: 992px) {
  .cbpm-shop-layout { grid-template-columns: 1fr; }
  .cbpm-shop-sidebar { position: relative; top: 0; }
  .cbpm-product-layout { grid-template-columns: 1fr; gap: 32px; }
  .cbpm-product-main-img img { height: auto; max-height: 500px; }
  .cbpm-carousel-track > div { flex: 0 0 calc(33.333% - 13.333px); } /* 3 cols on tablet */
}

@media (max-width: 768px) {
  .cbpm-archive-page { padding: 32px 0 60px; }
  .cbpm-archive-header h1 { font-size: 2em; }
  .cbpm-form-row.two-col, .cbpm-form-row.three-col { grid-template-columns: 1fr; }
  .cbpm-product-title { font-size: 1.6em; }
  .cbpm-specs-grid { grid-template-columns: 1fr; }
  .cbpm-price-block { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cbpm-btn-estimate, .cbpm-btn-whatsapp { width: 100%; min-width: 100%; text-align: center; }
  .cbpm-estimate-section { padding-top: 32px; margin-top: 40px; }
  .cbpm-carousel-track > div { flex: 0 0 calc(50% - 10px); } /* 2 cols on mobile */
  .cbpm-carousel-nav { width: 32px; height: 36px; min-width: 32px; min-height: 36px; font-size: 18px; }
  .cbpm-carousel-nav.prev { left: 8px; }
  .cbpm-carousel-nav.next { right: 8px; }
}

@media (max-width: 480px) {
  .cbpm-archive-header h1 { font-size: 1.6em; }
  .cbpm-card-image { height: 180px; }
  .cbpm-product-title { font-size: 1.4em; }
  .cbpm-form-container { padding: 0; }
  .cbpm-submit-btn { width: 100%; padding: 14px 20px; }
  .cbpm-file-upload-ui { padding: 15px 10px; }
  .cbpm-carousel-track > div { flex: 0 0 calc(50% - 8px); } /* 2 cols on small mobile */
}


/* --- Estimate Form Standalone Mode --------------------------------------- */
.cbpm-estimate-standalone {
    max-width: 740px;
    margin: 36px auto;
    padding: 0 20px;
    font-family: var(--cbpm-font, 'Inter', sans-serif);
}
.cbpm-estimate-standalone .cbpm-form-container {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(26, 86, 219, 0.09);
    border: 1px solid #e8ecf4;
}
.cbpm-estimate-standalone .cbpm-modal-header {
    background: linear-gradient(135deg, #0a1628 0%, #1a3a6b 100%);
    padding: 22px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cbpm-estimate-standalone .cbpm-modal-header h2 {
    color: #fff !important;
    margin: 0 !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
}
.cbpm-estimate-standalone .cbpm-modal-close {
    display: none !important;
}
.cbpm-estimate-standalone .cbpm-modern-form {
    padding: 32px;
}

/* --- Image Fit Modes ------------------------------------------------------ */

/* Default: Auto Crop (object-fit: cover  shape ??? ???? crop) */
.cbpm-img-fit--auto-crop .cbpm-card-image-wrap,
.cbpm-card-image-wrap.cbpm-img-fit--auto-crop,
.cbpm-cat-image-wrap.cbpm-img-fit--auto-crop {
    background: #f0f4f8;
}
.cbpm-img-fit--auto-crop img,
.cbpm-card-image-wrap.cbpm-img-fit--auto-crop img,
.cbpm-cat-image-wrap.cbpm-img-fit--auto-crop img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Fit: Contain (???????? ??? ??????, letterbox ??? ????) */
.cbpm-img-fit--fit img,
.cbpm-card-image-wrap.cbpm-img-fit--fit img,
.cbpm-cat-image-wrap.cbpm-img-fit--fit img {
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 8px;
    box-sizing: border-box;
    background: #f8fafc;
}

/* Original: scale ????? ??? ???? */
.cbpm-img-fit--original,
.cbpm-card-image-wrap.cbpm-img-fit--original,
.cbpm-cat-image-wrap.cbpm-img-fit--original {
    aspect-ratio: unset !important;
    height: auto !important;
    overflow: hidden;
    display: block;
}
.cbpm-img-fit--original img,
.cbpm-card-image-wrap.cbpm-img-fit--original img,
.cbpm-cat-image-wrap.cbpm-img-fit--original img {
    width: 100%; height: auto;
    object-fit: unset;
    display: block;
}

/* No image  hide card image area completely */
.cbpm-card-img-link[style*="display:none"] + .cbpm-card-content,
.cbpm-card-img-link[style*="display: none"] + .cbpm-card-content {
    border-radius: var(--cbpm-radius, 12px) var(--cbpm-radius, 12px) 0 0;
}

/* --- Category Page  Sidebar Buttons ---------------------------------- */
.cbpm-cat-page .cbpm-archive-header { margin-bottom: 24px; }

.cbpm-cat-filter-list { display: flex; flex-direction: column; gap: 4px; }

.cbpm-cat-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: #475569;
    background: transparent;
    border: 1.5px solid transparent;
    transition: all 0.18s;
    margin-bottom: 0;
    user-select: none;
    line-height: 1.3;
}
.cbpm-cat-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #e2e8f0;
}
.cbpm-cat-btn.cbpm-cat-active {
    background: var(--cbpm-primary-light);
    color: var(--cbpm-primary);
    border-color: var(--cbpm-primary);
    font-weight: 700;
}
.cbpm-cat-btn-icon {
    font-size: 1rem;
    flex-shrink: 0;
}
.cbpm-cat-btn span:last-child {
    margin-left: auto;
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 500;
}
.cbpm-cat-btn.cbpm-cat-active span:last-child {
    color: var(--cbpm-primary);
}

/* Skeleton loader while switching categories */
.cbpm-cat-skeleton-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}
.cbpm-skeleton-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e8ecf4;
}
.cbpm-sk-img {
    width: 100%; padding-top: 100%;
    background: linear-gradient(90deg, #f0f4f8 25%, #e8edf2 50%, #f0f4f8 75%);
    background-size: 200% 100%;
    animation: cbpmSkeleton 1.4s infinite;
}
.cbpm-sk-line {
    height: 14px; margin: 12px 14px 6px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f0f4f8 25%, #e8edf2 50%, #f0f4f8 75%);
    background-size: 200% 100%;
    animation: cbpmSkeleton 1.4s infinite;
}
.cbpm-sk-line.short { width: 55%; height: 10px; margin-bottom: 14px; }
@keyframes cbpmSkeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ----------------------------------------------------------------------------
   ESTIMATE FORM & CUSTOM FORM — Complete Design System (cbpm-ef-* / cbpm-cf-*)
---------------------------------------------------------------------------- */

/* Modal Overlay & Box */
.cbpm-modal-overlay { position:fixed; inset:0; width:100vw; height:100vh; background:rgba(10,22,40,0.6); backdrop-filter:blur(6px); z-index:99998; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s; }
.cbpm-modal-overlay.cbpm-modal-show { opacity:1; visibility:visible; }
.cbpm-ef-modal-box { background:#fff; width:94%; max-width:820px; max-height:92vh; border-radius:20px; display:flex; flex-direction:column; box-shadow:0 32px 80px rgba(10,22,40,0.28); transform:translateY(28px) scale(0.98); transition:transform .32s cubic-bezier(0.34,1.56,0.64,1); overflow:hidden; }
.cbpm-modal-show .cbpm-ef-modal-box { transform:translateY(0) scale(1); }

/* Header — uses theme color via CSS var */
.cbpm-ef-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 30px;
    background: linear-gradient(135deg, var(--cbpm-dark, #0a1628) 0%, var(--cbpm-navy, #1a3a6b) 100%);
    flex-shrink:0;
}
.cbpm-ef-modal-header { border-radius:0; }
.cbpm-ef-header-left { display:flex; align-items:center; gap:16px; }
.cbpm-ef-header-icon {
    width:46px; height:46px;
    background:rgba(255,255,255,0.18);
    border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.cbpm-ef-header-icon svg { color:#fff; width:22px; height:22px; }
.cbpm-ef-title {
    margin:0 0 4px; color:#fff;
    font-size:1.2rem; font-weight:800;
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    letter-spacing:-0.01em;
}
.cbpm-ef-product-tag {
    font-weight:500; font-size:0.9rem;
    background:rgba(255,255,255,0.15);
    padding:2px 10px; border-radius:20px;
    opacity:0.9;
}
.cbpm-ef-subtitle { margin:0; color:rgba(255,255,255,0.65); font-size:0.84rem; }
.cbpm-ef-close {
    width:36px; height:36px; border-radius:10px !important;
    background:#fff !important;
    border:1px solid #000 !important;
    color:#000 !important; font-size:1.3rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all .2s; flex-shrink:0; line-height:1;
}
.cbpm-ef-close:hover { background:#f1f5f9 !important; color:#000 !important; transform:scale(1.05); }

/* Body / Scroll area */
.cbpm-ef-modal-body { flex:1; overflow-y:auto; padding:0; }
.cbpm-ef-modal-body::-webkit-scrollbar { width:6px; }
.cbpm-ef-modal-body::-webkit-scrollbar-track { background:#f8fafc; }
.cbpm-ef-modal-body::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:4px; }
.cbpm-ef-form { padding:28px 30px 12px; }

/* Standalone wrapper */
.cbpm-ef-standalone { max-width:820px; margin:40px auto; padding:0 16px; }
.cbpm-ef-wrap { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 8px 48px rgba(26,86,219,0.1); border:1px solid #e8ecf4; }
.cbpm-ef-standalone .cbpm-ef-body { padding:0; }
.cbpm-ef-standalone .cbpm-ef-form { padding:32px 36px 12px; }

/* Sections */
.cbpm-ef-section { margin-bottom:28px; padding-bottom:24px; border-bottom:2px solid #f1f5f9; }
.cbpm-ef-section:last-of-type { border-bottom:none; margin-bottom:8px; }
.cbpm-ef-section-hd { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.cbpm-ef-section-num {
    width:30px; height:30px; border-radius:50%;
    background:linear-gradient(135deg, var(--cbpm-primary, #3AADE4), #2B8CB8);
    color:#fff; font-size:0.82rem; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    box-shadow: 0 3px 8px rgba(58,173,228,0.3);
}
.cbpm-ef-section-label { font-size:1.05rem; font-weight:700; color:#0f172a; letter-spacing:-0.01em; }

/* Grid System */
.cbpm-ef-grid { display:grid; gap:16px; margin-bottom:16px; }
.cbpm-ef-grid:last-child { margin-bottom:0; }
.cbpm-ef-grid-1 { grid-template-columns:1fr; }
.cbpm-ef-grid-2 { grid-template-columns:1fr 1fr; }
.cbpm-ef-grid-3 { grid-template-columns:1fr 1fr 1fr; }

/* Fields — LARGER TEXT */
.cbpm-ef-field { display:flex; flex-direction:column; }
.cbpm-ef-field label {
    font-size:0.9rem; font-weight:700; color:#334155;
    margin-bottom:8px; display:flex; align-items:center; gap:5px;
    letter-spacing:0.01em;
}
.cbpm-ef-req { color:#ef4444; font-size:0.9rem; }
.cbpm-ef-opt { font-weight:400; color:#94a3b8; font-size:0.82rem; }
.cbpm-ef-field input,
.cbpm-ef-field select,
.cbpm-ef-field textarea {
    width:100%;
    padding:13px 16px;
    border:1.5px solid #e2e8f0;
    border-radius:10px;
    font-size:0.97rem;
    font-family:inherit;
    color:#0f172a;
    background:#fff;
    transition:border-color .2s, box-shadow .2s, background .2s;
    outline:none;
    box-sizing:border-box;
    -webkit-appearance:none;
    appearance:none;
    line-height:1.5;
}
.cbpm-ef-field input:hover,
.cbpm-ef-field select:hover { border-color:#cbd5e1; background:#fafbff; }
.cbpm-ef-field select {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    padding-right:40px;
    cursor:pointer;
}
.cbpm-ef-field input:focus,
.cbpm-ef-field select:focus,
.cbpm-ef-field textarea:focus {
    border-color: var(--cbpm-primary, #1a56db);
    box-shadow: 0 0 0 3px rgba(26,86,219,0.12);
    background:#fff;
}
.cbpm-ef-field input::placeholder,
.cbpm-ef-field textarea::placeholder { color:#adb5bd; font-size:0.93rem; }
.cbpm-ef-readonly { background:#f4f7ff !important; color:#94a3b8 !important; cursor:not-allowed !important; border-color:#e8ecf4 !important; }
.cbpm-ef-field textarea { resize:vertical; min-height:100px; line-height:1.6; }
.cbpm-ef-field input[type="date"] { color:#475569; }

/* Checkbox & Radio in forms */
.cbpm-ef-check-group, .cbpm-ef-radio-group { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.cbpm-ef-check-item, .cbpm-ef-radio-item {
    display:flex; align-items:center; gap:8px;
    padding:9px 14px;
    border:1.5px solid #e2e8f0; border-radius:8px;
    cursor:pointer; font-size:0.92rem; font-weight:500; color:#334155;
    transition:all .18s; user-select:none;
}
.cbpm-ef-check-item:hover, .cbpm-ef-radio-item:hover { border-color: var(--cbpm-primary, #1a56db); background:#f0f4ff; color: var(--cbpm-primary, #1a56db); }
.cbpm-ef-check-item input, .cbpm-ef-radio-item input { width:16px; height:16px; accent-color: var(--cbpm-primary, #1a56db); cursor:pointer; margin:0; flex-shrink:0; }

/* OTP Field */
.cbpm-ef-otp-wrap { position:relative; }
.cbpm-ef-otp-btn {
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    background: var(--cbpm-primary, #1a56db); color:#fff;
    border:none; border-radius:7px; padding:6px 14px;
    font-size:0.82rem; font-weight:700; cursor:pointer;
    transition:background .2s; white-space:nowrap;
}
.cbpm-ef-otp-btn:hover { background: var(--cbpm-primary-dark, #1240b0); }
.cbpm-ef-otp-field { padding-right:110px !important; }
.cbpm-ef-otp-status { font-size:0.8rem; margin-top:5px; font-weight:600; }
.cbpm-ef-otp-status.success { color: #16a34a; }
.cbpm-ef-otp-status.error { color: #ef4444; }

/* File Upload */
.cbpm-ef-file-wrap { position:relative; border-radius:10px; overflow:visible; }
.cbpm-ef-file-wrap input[type='file'] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:2; border-radius:10px; }
.cbpm-ef-file-ui {
    border:2px dashed #cbd5e1; border-radius:10px; padding:22px 16px;
    text-align:center; background:#f8fafc; transition:all .2s; cursor:pointer;
}
.cbpm-ef-file-wrap:hover .cbpm-ef-file-ui { border-color: var(--cbpm-primary, #1a56db); background:#eef4ff; }
.cbpm-ef-file-ui svg { color: var(--cbpm-primary, #1a56db); margin-bottom:8px; }
.cbpm-ef-file-ui p { margin:0 0 4px; font-weight:600; font-size:0.95rem; color:#334155; }
.cbpm-ef-file-ui small { color:#94a3b8; font-size:0.82rem; }
.cbpm-ef-file-name { font-size:0.82rem; color: var(--cbpm-primary, #1a56db); margin-top:6px; display:block; word-break:break-all; font-weight:600; }

/* Submit */
.cbpm-ef-submit { padding:20px 30px 24px; background:#f8fafc; border-top:1.5px solid #f1f5f9; text-align:center; }
.cbpm-ef-submit-btn {
    width:100%; padding:16px 28px;
    background:linear-gradient(135deg, var(--cbpm-primary, #3AADE4), var(--cbpm-primary-dark, #2B8CB8));
    color:#fff; border:none; border-radius:12px;
    font-size:1.08rem; font-weight:700; font-family:inherit;
    cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px;
    transition:all .22s; letter-spacing:0.01em;
    box-shadow: 0 4px 16px rgba(58,173,228,0.25);
}
.cbpm-ef-submit-btn:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(58,173,228,0.35); }
.cbpm-ef-submit-btn:active { transform:translateY(0); }
.cbpm-ef-submit-btn .cbpm-btn-text { display:flex; align-items:center; gap:10px; }
.cbpm-ef-privacy { margin:12px 0 0; font-size:0.82rem; color:#94a3b8; }
.cbpm-ef-btn-secondary { padding:12px 28px !important; background:transparent !important; color:#000 !important; border:1.5px solid #000 !important; border-radius:8px; font-weight:600; font-size:14px !important; font-family:inherit; cursor:pointer; transition:all .2s; display:inline-flex !important; align-items:center !important; justify-content:center !important; white-space:nowrap !important; min-width:140px; min-height:46px !important; height:auto !important; max-height:none !important; line-height:normal !important; box-sizing:border-box !important; }
.cbpm-ef-btn-secondary:hover { background:#000 !important; color:#fff !important; }

/* Success */
.cbpm-ef-success { text-align:center; padding:44px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.cbpm-ef-success-icon { font-size:52px !important; margin-bottom:18px; line-height:1; }
.cbpm-ef-success h3 { font-size:21px !important; font-weight:800 !important; color:#0f172a !important; margin:0 0 12px !important; line-height:1.3 !important; }
.cbpm-ef-success p { color:#64748b !important; margin:0 0 8px !important; font-size:13px !important; line-height:1.5 !important; }

/* Responsive */
@media (max-width:640px) {
  .cbpm-ef-grid-2, .cbpm-ef-grid-3 { grid-template-columns:1fr; }
  .cbpm-ef-form { padding:20px 18px 8px; }
  .cbpm-ef-submit { padding:16px 18px 20px; }
  .cbpm-ef-header { padding:18px 20px; }
  .cbpm-ef-modal-box { max-height:98vh; border-radius:16px 16px 0 0; align-self:flex-end; width:100%; }
}

/* -- Trigger Button ----------------------------------------------------- */
.cbpm-modal-trigger-btn { display:inline-flex; align-items:center; gap:8px; padding:14px 30px; background:linear-gradient(135deg, var(--cbpm-primary, #3AADE4), var(--cbpm-primary-dark, #2B8CB8)); color:#fff; border:none; border-radius:10px; font-size:1rem; font-weight:700; font-family:inherit; cursor:pointer; transition:all .22s; box-shadow:0 4px 14px rgba(58,173,228,0.25); }
.cbpm-modal-trigger-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(58,173,228,0.35); }

/* -- File Upload UI ---------------------------------------------------- */
.cbpm-file-upload { position:relative; border-radius:10px; overflow:hidden; }
.cbpm-file-upload input[type='file'] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:2; }
.cbpm-file-upload-ui { border:2px dashed #e2e8f0; border-radius:10px; padding:20px 16px; text-align:center; background:#f8fafc; transition:border-color .2s,background .2s; }
.cbpm-file-upload:hover .cbpm-file-upload-ui { border-color:#1a56db; background:#eef4ff; }
.cbpm-file-name { font-size:0.78rem; color:#1a56db; margin-top:6px; display:block; word-break:break-all; }

/* -- Trigger Button (duplicate declaration, kept for legacy compat) ---- */
.cbpm-modal-trigger-btn { display:inline-flex; align-items:center; padding:13px 28px; background:linear-gradient(135deg,#3AADE4,#2B8CB8); color:#fff; border:none; border-radius:10px; font-size:0.95rem; font-weight:700; font-family:inherit; cursor:pointer; transition:all .2s; }
.cbpm-modal-trigger-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(58,173,228,0.30); }

/* ----------------------------------------------------------------------------
   CATEGORY GRID PAGE  cbpm-catgrid-*
---------------------------------------------------------------------------- */

/* Grid */
.cbpm-catgrid-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

/* Card */
.cbpm-catgrid-card {
    background: #fff;
    border-radius: var(--cbpm-radius);
    border: 1px solid #e8ecf4;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    display: flex;
    flex-direction: column;
    box-shadow: var(--cbpm-shadow);
}
.cbpm-catgrid-card:hover {
    box-shadow: 0 8px 32px rgba(58,173,228,0.14);
    transform: translateY(-3px);
}

/* Image */
.cbpm-catgrid-img-link { display: block; }
.cbpm-catgrid-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    padding-top: 0;
    overflow: hidden;
    background: #f1f5f9;
}
.cbpm-catgrid-img-wrap img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center bottom !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform .35s;
}
.cbpm-catgrid-card:hover .cbpm-catgrid-img-wrap img { transform: scale(1.04); }
.cbpm-catgrid-no-img {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f1f5f9, #e8ecf4);
}
.cbpm-catgrid-sub-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--cbpm-primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.05em;
}

/* Content */
.cbpm-catgrid-content { padding: 20px 24px; flex: 1; display: flex; flex-direction: column; }
.cbpm-catgrid-title-link { text-decoration: none; }
.cbpm-catgrid-title {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
}
.cbpm-catgrid-card:hover .cbpm-catgrid-title { color: var(--cbpm-primary); }
.cbpm-catgrid-desc {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
    flex: 1;
}
.cbpm-catgrid-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cbpm-primary);
    text-decoration: none;
    margin-top: 8px;
}
.cbpm-catgrid-link:hover { gap: 8px; color: var(--cbpm-primary-dark); }
.cbpm-catgrid-link span { transition: margin-left .15s; }

/* Sidebar checkbox style */
.cbpm-cat-chk-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 500;
    color: #334155;
    transition: background .15s;
}
.cbpm-cat-chk-label:hover { background: #f8fafc; }
.cbpm-cat-chk-label input[type='checkbox'] {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    accent-color: var(--cbpm-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.cbpm-catgrid-filter-group { margin-bottom: 4px; }
.cbpm-catgrid-children { border-left: 2px solid #e2e8f0; margin-left: 14px; padding-left: 4px; }
.cbpm-catgrid-all-label { font-size: 0.88rem; }

@media (min-width: 993px) {
    .cbpm-catgrid-grid { grid-template-columns: repeat(4, 1fr); }
    .cbpm-products-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 900px) {
    .cbpm-catgrid-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 580px) {
    .cbpm-catgrid-grid { grid-template-columns: repeat(2, 1fr); }
}

/* -- Active filter label --------------------------------------------------- */
.cbpm-filter-label.cbpm-filter-active {
    background: var(--cbpm-primary-light);
    color: var(--cbpm-primary);
    font-weight: 700;
    border-radius: 8px;
}
.cbpm-filter-label.cbpm-filter-active input[type='checkbox'] { accent-color: var(--cbpm-primary); }

/* Category Grid List View
   Same fix as product list view: aspect-ratio must be overridden */
.cbpm-catgrid-grid.cbpm-list-view {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cbpm-catgrid-grid.cbpm-list-view .cbpm-catgrid-card {
    flex-direction: row;
    align-items: stretch;
    border-radius: var(--cbpm-radius);
    overflow: hidden;
    min-height: 140px;
    max-height: 180px;
}
.cbpm-catgrid-grid.cbpm-list-view .cbpm-catgrid-img-link {
    width: 180px;
    max-width: 180px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-right: 1px solid #e8ecf4;
    border-radius: 0;
    overflow: hidden;
}
.cbpm-catgrid-grid.cbpm-list-view .cbpm-catgrid-img-wrap {
    aspect-ratio: unset !important;   /* CRITICAL: kill the 1/1 ratio */
    height: 180px !important;
    width: 180px !important;
    border-radius: 0;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cbpm-catgrid-grid.cbpm-list-view .cbpm-catgrid-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
    border-radius: 0;
}
.cbpm-catgrid-grid.cbpm-list-view .cbpm-catgrid-content {
    flex: 1;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}
.cbpm-catgrid-grid.cbpm-list-view .cbpm-catgrid-title {
    font-size: 1.05rem;
    font-weight: 700;
    white-space: normal;
    color: var(--cbpm-dark);
}
.cbpm-catgrid-grid.cbpm-list-view .cbpm-catgrid-desc {
    font-size: 0.88rem;
    color: #64748b;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Single Product V2 — Thumbnail Fixes ─────────────────────────────────── */
.cbpm-sp-gallery-col { display: flex; flex-direction: column; gap: 14px; }
.cbpm-thumb-track img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: border-color .2s; flex-shrink: 0; }
.cbpm-thumb-track img.active { border-color: var(--cbpm-primary); }
.cbpm-thumb-track img:hover { border-color: #94a3b8; }


/* ── Single Product Main Image — Perfect 1:1 Square ─────────────────────── */
.cbpm-sp-main-img-box { aspect-ratio: 1 / 1 !important; height: auto !important; }
.cbpm-sp-main-img-box img.cbpm-sp-main-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* Make the box position:relative so absolute child works */
.cbpm-sp-main-img-box { position: relative !important; }

/* Product Grid List View
   KEY FIX: aspect-ratio MUST be overridden here, otherwise the base
   .cbpm-card-image-wrap { aspect-ratio: 1/1 } makes the image enormous
   in list view because the card is now full-width row. */
.cbpm-products-grid.cbpm-list-view {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cbpm-products-grid.cbpm-list-view .cbpm-product-card-v2 {
    flex-direction: row;
    align-items: stretch;
    background: #fff;
    border-radius: var(--cbpm-radius);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--cbpm-shadow);
    overflow: hidden;
    min-height: 160px;
    max-height: 200px;
}
.cbpm-products-grid.cbpm-list-view .cbpm-card-img-link {
    width: 200px;
    max-width: 200px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border-right: 1px solid #e8ecf4;
    border-radius: 0;          /* card handles radius */
    overflow: hidden;
}
.cbpm-products-grid.cbpm-list-view .cbpm-card-image-wrap {
    aspect-ratio: unset !important;   /* CRITICAL: kill the 1/1 ratio */
    height: 200px !important;         /* fixed height = card height */
    width: 200px !important;
    border-radius: 0;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cbpm-products-grid.cbpm-list-view .cbpm-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
    border-radius: 0;
}
.cbpm-products-grid.cbpm-list-view .cbpm-card-content {
    flex: 1;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}
.cbpm-products-grid.cbpm-list-view .cbpm-card-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cbpm-dark);
    -webkit-line-clamp: 2;
    white-space: normal;
}
.cbpm-products-grid.cbpm-list-view .cbpm-card-desc {
    font-size: 0.88rem;
    color: #64748b;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cbpm-products-grid.cbpm-list-view .cbpm-card-price-row {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cbpm-dark);
    margin-top: 4px;
}
.cbpm-products-grid.cbpm-list-view .cbpm-card-cat-link a {
    font-size: 0.85rem;
}
/* Hide the fav button floating weirdly in list view */
.cbpm-products-grid.cbpm-list-view .cbpm-fav-btn {
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
}

.cbpm-total-count { font-size: 10pt; color: #475569; font-weight: 500; display: flex; align-items: center; }

/* --- Mobile Responsive Fixes --- */
.cbpm-mobile-filter-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.cbpm-mobile-filter-toggle:hover { background: #f8fafc; }

@media (max-width: 992px) {
    /* Filter Sidebar */
    .cbpm-mobile-filter-toggle { display: flex; }
    .cbpm-mobile-apply-btn { display: flex !important; }
    .cbpm-shop-sidebar { display: none; }
    .cbpm-shop-sidebar.cbpm-sidebar-open { display: block; animation: slideDown 0.3s ease; }
    
    /* 3 Columns on Tablet */
    .cbpm-products-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 14px; }
    .cbpm-catgrid-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 14px; }
    
    /* Adjust font size for tablet */
    .cbpm-card-heading, .cbpm-catgrid-title { font-size: 1rem; }
    .cbpm-card-desc, .cbpm-catgrid-desc { font-size: 0.85rem; }
}

@media (max-width: 768px) {
    /* 2 Columns on Mobile */
    .cbpm-products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
    .cbpm-catgrid-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }

    /* Adjust fonts for mobile 2-column */
    .cbpm-card-heading, .cbpm-catgrid-title { font-size: 0.9rem; margin: 0; line-height: 1.3; }
    .cbpm-card-price-row { font-size: 0.85rem; }
    .cbpm-card-desc, .cbpm-catgrid-desc { display: -webkit-box; font-size: 0.75rem; margin: 0; line-height: 1.4; }
    .cbpm-card-cat-link a, .cbpm-catgrid-link { font-size: 0.8rem; }

    /* List view on mobile — compact with fixed image size */
    .cbpm-products-grid.cbpm-list-view .cbpm-product-card-v2 { flex-direction: row; min-height: 110px; max-height: 130px; }
    .cbpm-products-grid.cbpm-list-view .cbpm-card-img-link { width: 110px; max-width: 110px; }
    .cbpm-products-grid.cbpm-list-view .cbpm-card-image-wrap { aspect-ratio: unset !important; height: 130px !important; width: 110px !important; }
    .cbpm-products-grid.cbpm-list-view .cbpm-card-content { padding: 10px 12px; }
    .cbpm-products-grid.cbpm-list-view .cbpm-card-heading { font-size: 0.9rem; }

    .cbpm-catgrid-grid.cbpm-list-view .cbpm-catgrid-card { flex-direction: row; min-height: 110px; max-height: 130px; }
    .cbpm-catgrid-grid.cbpm-list-view .cbpm-catgrid-img-link { width: 110px; max-width: 110px; }
    .cbpm-catgrid-grid.cbpm-list-view .cbpm-catgrid-img-wrap { aspect-ratio: unset !important; height: 130px !important; width: 110px !important; }
    .cbpm-catgrid-grid.cbpm-list-view .cbpm-catgrid-content { padding: 10px 12px; }
    .cbpm-catgrid-grid.cbpm-list-view .cbpm-catgrid-title { font-size: 0.9rem; }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   COMPREHENSIVE RESPONSIVE FIX — Supplemental Layer
   Fixes: Overflow, Typography Scale, Single Product Mobile, Tables, Archive
   ============================================================================ */

/* ── Global: prevent any element from causing horizontal scroll ── */
.cbpm-single-product-v2,
.cbpm-archive-page,
.cbpm-container {
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
}
.cbpm-container { padding: 0 16px; }

/* ── Single Product: features row on very small screens ── */
.cbpm-sp-features-row { row-gap: 8px; column-gap: 14px; }

/* ── Single Product: action buttons always full-width on mobile ── */
@media (max-width: 640px) {
    .cbpm-sp-actions { flex-direction: column; gap: 10px; }
    .cbpm-btn-chat, .cbpm-btn-estimate { width: 100% !important; justify-content: center !important; }
}

/* ── Product Card: card content compact on small screens ── */
@media (max-width: 480px) {
    .cbpm-card-content { padding: 8px 8px 10px; gap: 3px; }
    .cbpm-card-heading  { font-size: 0.82rem; line-height: 1.2; }
    .cbpm-card-desc     { font-size: 0.72rem; }
    .cbpm-card-price-row { font-size: 0.8rem; }
    .cbpm-fav-btn { width: 30px; height: 30px; top: 8px; right: 8px; }
}

/* ── Shop sidebar: proper full-width panel on mobile ── */
@media (max-width: 992px) {
    .cbpm-shop-sidebar {
        width: 100%;
        max-width: 100%;
        border-radius: 10px;
        margin-bottom: 16px;
    }
    .cbpm-shop-layout { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Archive Header ── */
@media (max-width: 480px) {
    .cbpm-archive-header h1 { font-size: 1.5em; }
    .cbpm-archive-page       { padding: 24px 0 48px; }
    .cbpm-category-filter    { gap: 8px; }
    .cbpm-cat-pill           { padding: 6px 14px; font-size: 0.82em; }
}

/* ── Single product table: always fixed layout, never overflow ── */
.cbpm-sp-table-wrap { overflow-x: hidden !important; }
.cbpm-sp-table th   { width: 38%; word-break: break-word; }
.cbpm-sp-table td   { word-break: break-word; }
@media (max-width: 400px) {
    .cbpm-sp-table th { width: 42%; font-size: 0.78em; padding: 8px 8px; }
    .cbpm-sp-table td { font-size: 0.78em; padding: 8px 8px; }
}

/* ── Thumbnails on mobile: smaller ── */
@media (max-width: 480px) {
    .cbpm-thumb { width: 48px; height: 48px; }
    .cbpm-sp-thumbnails-wrap { gap: 6px; margin-top: 10px; }
    .cbpm-thumb-nav { width: 32px !important; height: 36px !important; font-size: 18px !important; }
}

/* ── Bottom grid on single product: full-width on mobile ── */
@media (max-width: 640px) {
    .cbpm-sp-bottom-grid   { grid-template-columns: 1fr !important; gap: 16px; }
    .cbpm-sp-bottom-split  { grid-template-columns: 1fr !important; }
    .cbpm-sp-desc-col,
    .cbpm-reviews-box      { border-radius: 10px; }
}

/* ── Modal responsiveness: slide up from bottom on mobile ── */
@media (max-width: 640px) {
    .cbpm-modal-overlay { align-items: flex-end; }
    .cbpm-ef-modal-box,
    .cbpm-modal-box {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 18px 18px 0 0 !important;
        max-height: 92vh !important;
        align-self: flex-end;
    }
}

/* ── Form rows: force single column on small screens ── */
@media (max-width: 600px) {
    .cbpm-form-row.two-col,
    .cbpm-form-row.three-col,
    .cbpm-ef-grid-2,
    .cbpm-ef-grid-3 { grid-template-columns: 1fr !important; }
    .cbpm-ef-check-group,
    .cbpm-ef-radio-group { flex-direction: column; }
    .cbpm-ef-check-item,
    .cbpm-ef-radio-item  { width: 100%; }
}

/* ── Carousel: safe on mobile ── */
@media (max-width: 480px) {
    .cbpm-carousel-nav { width: 32px; height: 36px; min-width: 32px; min-height: 36px; font-size: 18px; }
    .cbpm-carousel-nav.prev { left: 4px; }
    .cbpm-carousel-nav.next { right: 4px; }
    .cbpm-carousel-track > div { flex: 0 0 calc(50% - 8px); }
}

/* ── Category grid on very small screens ── */
@media (max-width: 420px) {
    .cbpm-catgrid-grid { grid-template-columns: 1fr !important; }
    .cbpm-catgrid-content { padding: 14px 16px; }
}

/* ── Prevent badge/text truncation issues on product single ── */
.cbpm-badge-highlight {
    max-width: calc(100% - 56px);
    white-space: normal;
    word-break: break-word;
}

/* ── Category page sidebar top-spacing fix on sticky position ── */
@media (min-width: 993px) {
    .cbpm-shop-sidebar { top: 24px; }
}

/* ── Prevent WhatsApp floating button overlapping content ── */
/* (Uses a z-index ensure it is above content but hint to user they can scroll) */
.cbpm-udb-wrap { isolation: isolate; }

/* ============================================================
   CUSTOMER DASHBOARD — ESTIMATE DETAIL VIEW MODAL
   Scoped to #cbpm-estimate-modal so theme styles can't bleed in
   ============================================================ */

/* Overlay */
#cbpm-estimate-modal {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #0f172a !important;
    box-sizing: border-box !important;
}

/* Modal box */
#cbpm-estimate-modal .cbpm-modal-box {
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
    overflow: hidden !important;
    font-family: inherit !important;
}

/* Header */
#cbpm-estimate-modal .cbpm-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: linear-gradient(135deg, #0a1628, #1a56db) !important;
    border-radius: 10px 10px 0 0 !important;
    margin: 0 !important;
}

#cbpm-estimate-modal .cbpm-modal-header h3,
#cbpm-estimate-modal #cbpm-modal-title {
    color: #fff !important;
    margin: 0 !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Close Button */
#cbpm-estimate-modal .cbpm-modal-close {
    background: rgba(255,255,255,0.2) !important;
    border: none !important;
    color: #fff !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 50% !important;
    font-size: 1.2rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    transition: background 0.2s !important;
    box-shadow: none !important;
}
#cbpm-estimate-modal .cbpm-modal-close:hover {
    background: rgba(255,255,255,0.35) !important;
    color: #fff !important;
}

/* Body */
#cbpm-estimate-modal .cbpm-modal-body,
#cbpm-estimate-modal #cbpm-modal-body {
    padding: 24px !important;
    font-family: inherit !important;
    color: #0f172a !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    background: #fff !important;
    overflow-y: auto !important;
    max-height: calc(85vh - 80px) !important;
}

/* Detail grid (2-col) */
#cbpm-estimate-modal .cbpm-modal-detail-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

#cbpm-estimate-modal .cbpm-modal-detail-row {
    display: contents !important;
}

/* Label column */
#cbpm-estimate-modal .cbpm-label {
    font-weight: 600 !important;
    color: #64748b !important;
    font-size: 10pt !important;
    padding: 12px 14px !important;
    background: #f8f9fa !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-family: inherit !important;
    text-align: left !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    margin: 0 !important;
}

/* Value column */
#cbpm-estimate-modal .cbpm-value {
    color: #0f172a !important;
    font-size: 10pt !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-family: inherit !important;
    text-align: left !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    margin: 0 !important;
    background: #fff !important;
}

#cbpm-estimate-modal .cbpm-value a {
    color: #1d6efd !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-weight: normal !important;
}
#cbpm-estimate-modal .cbpm-value a:hover {
    text-decoration: underline !important;
}

/* Badge (status pill) */
#cbpm-estimate-modal .cbpm-badge {
    display: inline-block !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Strong tags */
#cbpm-estimate-modal .cbpm-value strong {
    font-weight: 700 !important;
    font-family: inherit !important;
}

/* Product image in modal */
#cbpm-estimate-modal .cbpm-value img {
    width: 50px !important;
    height: 50px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    border: 1px solid #ddd !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

/* Payment section */
#cbpm-estimate-modal .cbpm-payment-section {
    margin-top: 20px !important;
    padding: 16px !important;
    background: #f8fafc !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
}

#cbpm-estimate-modal .cbpm-payment-section h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: none !important;
    font-family: inherit !important;
}

#cbpm-estimate-modal .cbpm-payment-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-size: 13px !important;
    color: #0f172a !important;
}

#cbpm-estimate-modal .cbpm-payment-row:last-child {
    border-bottom: none !important;
}

/* Design file section */
#cbpm-estimate-modal div[style*="background:#f0f9ff"] {
    margin-top: 16px !important;
    padding: 14px !important;
    background: #f0f9ff !important;
    border-radius: 8px !important;
    border: 1px solid #bae6fd !important;
    font-size: 14px !important;
}