/* ===========================================================================
 * Kanalab Brosur — Front-end styles (Mobile First)
 * Semua selector di-prefix .kbr- agar tidak bentrok dengan Bricks/tema.
 * ========================================================================= */

/* ===== Base ===== */
.kbr-wrap,
.kbr-wrap *{box-sizing:border-box}
.kbr-wrap{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:#0F172A;max-width:1248px;margin:0 auto;width:100%;line-height:1.5}
.kbr-wrap img{max-width:100%;height:auto}
.kbr-empty{padding:40px 16px;text-align:center;color:#909090;font-size:15px}
.kbr-hr{border:none;border-top:1px solid #EDEEEE;margin:0}
.kbr-section-title{font-weight:600;font-size:18px;color:#0F172A;margin:0}

/* ===== Kartu produk (dipakai list & similar) ===== */
.kbr-card{display:flex;flex-direction:column;gap:8px;padding:12px;background:#FEFFFF;border:1px solid #E7E8EA;box-shadow:0 2px 8px rgba(51,51,51,.1);border-radius:16px;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
.kbr-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(28,74,176,.15)}
.kbr-card__img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:12px;background:#FEFFFF;display:block}
.kbr-card__title{font-weight:600;font-size:16px;line-height:1.4;color:#0F172A;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kbr-card__sold{font-size:14px;color:#909090;margin:0}

/* ===== Grid ===== */
.kbr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:768px){.kbr-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.kbr-grid{grid-template-columns:repeat(4,1fr)}}
.kbr-grid--similar{grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.kbr-grid--similar{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.kbr-grid--similar{grid-template-columns:repeat(5,1fr)}}

/* ===== Panel putih ===== */
.kbr-panel{padding:20px;background:#FEFFFF;box-shadow:0 2px 8px rgba(51,51,51,.1);border-radius:16px}
@media(min-width:768px){.kbr-panel{padding:32px 40px}}

/* ===== LIST ===== */
.kbr-list{display:flex;flex-direction:column;gap:24px}
.kbr-heading{font-weight:700;font-size:26px;line-height:1.3;text-align:center;margin:0 0 16px;background:linear-gradient(180deg,#0F172A -52.7%,#0044E7 140.44%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#0F172A}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.kbr-heading{color:#0F3DBC}}
@media(min-width:768px){.kbr-heading{font-size:40px}}

.kbr-searchbar{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 16px;background:#F8FAFF;border:1px solid #1C4AB0;box-shadow:0 2px 8px rgba(51,51,51,.1);border-radius:32px}
.kbr-searchbar input[type=search]{flex:1;border:none;background:transparent;font-size:16px;color:#0F172A;padding:4px 0;outline:none;min-width:0}
.kbr-searchbar input[type=search]::placeholder{color:#BBBCBC}
.kbr-searchbar button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#1C4AB0;color:#fff;border:2px solid #1C4AB0;border-radius:32px;padding:8px 22px;margin-right:12px;font-weight:600;font-size:16px;cursor:pointer;box-shadow:0 8px 10px 1px rgba(51,51,51,.1);transition:background .15s}
.kbr-searchbar button:hover{background:#163a8c}
.kbr-searchbar button svg{width:20px;height:20px}
.kbr-searchbar__txt{display:none}
@media(min-width:600px){.kbr-searchbar__txt{display:inline}}

.kbr-layout{display:flex;flex-direction:column;gap:16px}
@media(min-width:1024px){.kbr-layout{flex-direction:row;gap:32px;align-items:flex-start}}

.kbr-sidebar{width:100%}
@media(min-width:1024px){.kbr-sidebar{flex:0 0 220px;width:220px}}
.kbr-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0}
@media(min-width:1024px){.kbr-filters{flex-direction:column;flex-wrap:nowrap}}
.kbr-filter{display:flex;align-items:center;gap:8px;padding:12px 14px;background:#FEFFFF;border:1px solid #E7E8EA;border-radius:8px;box-shadow:0 2px 8px rgba(51,51,51,.1);font-size:15px;color:#575858;cursor:pointer;text-decoration:none;transition:border-color .15s,color .15s}
@media(min-width:1024px){.kbr-filter{width:100%}}
.kbr-filter:hover{border-color:#C7D4F0}
.kbr-filter.is-active{border-color:#1C4AB0;color:#0F172A}
.kbr-filter input[type=checkbox]{width:18px;height:18px;accent-color:#1C4AB0;cursor:pointer;margin:0}
.kbr-filter .kbr-check{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;background:#1C4AB0;color:#fff}
.kbr-filter .kbr-check:empty{background:#fff;border:2px solid #E0E1E2}
.kbr-filter .kbr-check svg{width:14px;height:14px}

.kbr-results{flex:1;display:flex;flex-direction:column;gap:16px;min-width:0;width:100%}
.kbr-results__count{font-weight:600;font-size:16px;color:#0F172A;margin:0}
.kbr-results__filter{color:#1C4AB0;font-weight:500}

.kbr-pagination{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding-top:8px}
@media(min-width:768px){.kbr-pagination{justify-content:flex-end;gap:12px}}
.kbr-page{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;border-radius:999px;font-weight:500;font-size:15px;color:#1C4AB0;text-decoration:none;padding:0 8px;transition:background .15s}
.kbr-page:hover{background:#E9EFFD}
.kbr-page.is-current{background:#1C4AB0;color:#fff}
.kbr-page.is-current:hover{background:#1C4AB0}
.kbr-page.is-disabled{color:#C8C8C8;pointer-events:none}
.kbr-page.is-dots{pointer-events:none;background:transparent}

/* ===== DETAIL ===== */
.kbr-detail{display:flex;flex-direction:column;gap:20px;padding:20px;background:#FEFFFF;box-shadow:0 2px 8px rgba(51,51,51,.1);border-radius:16px}
@media(min-width:768px){.kbr-detail{padding:32px 40px;gap:24px}}
.kbr-breadcrumb{display:flex;gap:8px;font-size:14px;color:#C7C9CB;flex-wrap:wrap;align-items:center}
.kbr-breadcrumb a{color:#C7C9CB;text-decoration:none}
.kbr-breadcrumb a:hover{color:#1C4AB0}
.kbr-breadcrumb b{color:#373C41;font-weight:400}

.kbr-hero{display:flex;flex-direction:column;gap:24px}
@media(min-width:1024px){.kbr-hero{flex-direction:row;gap:32px;align-items:flex-start}}

/* galeri */
.kbr-gallery{display:flex;flex-direction:column-reverse;gap:12px}
@media(min-width:1024px){.kbr-gallery{flex-direction:row;flex:0 0 auto}}
.kbr-thumbs{display:flex;flex-direction:row;gap:12px;overflow-x:auto;padding-bottom:4px}
@media(min-width:1024px){.kbr-thumbs{flex-direction:column;overflow:visible;padding:0}}
.kbr-thumb{flex:0 0 auto;width:64px;height:64px;padding:6px;background:#FEFFFF;border:1px solid #E7E8EA;border-radius:8px;cursor:pointer;box-shadow:0 2px 8px rgba(51,51,51,.1)}
.kbr-thumb img{width:100%;height:100%;object-fit:cover;border-radius:6px;display:block}
.kbr-thumb.is-active{border-color:#1C4AB0;box-shadow:0 2px 8px rgba(75,165,255,.25)}
.kbr-main{display:flex;align-items:center;justify-content:center;padding:16px;background:#FEFFFF;border:1px solid #E7E8EA;border-radius:16px;box-shadow:0 2px 8px rgba(51,51,51,.1);width:100%}
@media(min-width:1024px){.kbr-main{width:332px;height:332px;flex:0 0 332px}}
.kbr-main img{width:100%;max-height:300px;object-fit:contain;border-radius:12px;display:block}

/* info kanan */
.kbr-info{display:flex;flex-direction:column;gap:16px;flex:1;min-width:0}
.kbr-meta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kbr-brand{font-weight:700;font-size:15px;letter-spacing:.04em;color:#0F172A;padding:10px 12px;border-radius:12px;box-shadow:0 2px 8px rgba(51,51,51,.1);background:#FEFFFF}
.kbr-badge{display:inline-flex;align-items:center;padding:9px 16px;background:#E9EFFD;border-radius:16px;font-weight:600;font-size:15px;color:#1D78D2;box-shadow:0 2px 8px rgba(51,51,51,.06)}
.kbr-title{font-weight:600;font-size:20px;line-height:1.5;color:#0F172A;margin:0}
@media(min-width:768px){.kbr-title{font-size:24px;line-height:1.6}}
.kbr-prices{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kbr-price{font-weight:600;font-size:20px;color:#1E4FBC}
.kbr-price-slash{font-size:16px;color:#BBBCBC;text-decoration:line-through}

.kbr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 28px;background:#1C4AB0;border:2px solid #1C4AB0;color:#fff;font-weight:600;font-size:16px;border-radius:32px;text-decoration:none;box-shadow:0 8px 10px 1px rgba(51,51,51,.1);cursor:pointer;transition:background .15s}
.kbr-btn:hover{background:#163a8c;color:#fff}
.kbr-btn svg{width:20px;height:20px;flex:0 0 auto}
.kbr-btn--block{width:100%}
@media(min-width:768px){.kbr-btn--block{width:auto;align-self:flex-start;margin-top:24px}}

.kbr-detail-block{display:flex;flex-direction:column;gap:12px}
.kbr-detail-desc{font-size:15px;line-height:1.7;color:#575858}
.kbr-detail-desc p{margin:0 0 12px}
.kbr-detail-desc p:last-child{margin-bottom:0}

.kbr-similar{background:rgba(233,239,253,.5);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:16px}

/* ===== HOME : section "Our Product" ([list_products]) ===== */
.kbr-home__panel{display:flex;flex-direction:column;align-items:center;gap:24px;padding:32px 20px}
@media(min-width:768px){.kbr-home__panel{padding:56px 40px;gap:40px}}
.kbr-home__head{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;width:100%}
.kbr-home__title{font-weight:700;font-size:26px;line-height:1.3;letter-spacing:-.017em;color:#0F172A;margin:0}
@media(min-width:768px){.kbr-home__title{font-size:36px}}
.kbr-home__subtitle{font-size:15px;line-height:1.5;letter-spacing:-.006em;color:#909090;margin:0;max-width:760px}
@media(min-width:768px){.kbr-home__subtitle{font-size:18px}}
.kbr-grid--home{width:100%;grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.kbr-grid--home{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.kbr-grid--home{grid-template-columns:repeat(5,1fr)}}
.kbr-grid--home .kbr-card__img{object-fit:contain;background:#fff}
.kbr-btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 32px;max-width:100%;background:#fff;border:1px solid #1C4AB0;color:#1C4AB0;font-weight:600;font-size:18px;line-height:28px;border-radius:32px;text-decoration:none;box-shadow:0 8px 10px 1px rgba(51,51,51,.1);transition:background .15s,color .15s}
.kbr-btn-outline:hover{background:#1C4AB0;color:#fff}

/* ===========================================================================
 * ABOUT PAGE ([about-page]) — pindahan dari Bricks Code element
 * ========================================================================= */
.kkv-about-section{width:100%;max-width:1240px;margin-left:auto;margin-right:auto;font-family:'Inter',sans-serif;box-sizing:border-box}
.kkv-about-container{width:100%;display:flex;flex-direction:column;gap:32px}

/* Shared card */
.kkv-card{background:#FEFFFF;box-shadow:0px 2px 8px rgba(51,51,51,0.1);border-radius:16px;padding:32px 40px;box-sizing:border-box;width:100%}

/* About us */
.kkv-about-card{display:flex;flex-direction:column;align-items:center}
.kkv-about-row{display:flex;flex-direction:row;align-items:center;gap:40px;padding:16px 0;width:100%;background:linear-gradient(90deg,#FFFFFF 50.86%,rgba(255,255,255,0.1) 76.41%)}
.kkv-about-image{flex:1 1 0;min-width:0;aspect-ratio:564/408;background-image:url('http://kanalab-staging.my.id/wp-content/uploads/2026/05/about-img-kanalab.jpg');background-size:cover;background-position:center;border-radius:16px}
.kkv-about-text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px}
.kkv-about-title{font-family:'Inter',sans-serif;font-weight:700;font-size:40px;line-height:1.2;letter-spacing:-0.021em;margin:0 0 12px 0;background:linear-gradient(180deg,#0F172A -52.7%,#0044E7 140.44%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.kkv-about-desc{font-family:'Inter',sans-serif;font-weight:400;font-size:18px;line-height:28px;letter-spacing:-0.006em;color:#575858;margin:0}

/* Philosophy */
.kkv-philosophy-card{position:relative;width:100%;border-radius:16px;overflow:hidden;box-shadow:0px 2px 8px rgba(51,51,51,0.1)}
.kkv-philosophy-bg{position:absolute;inset:0;background-image:url('http://kanalab-staging.my.id/wp-content/uploads/2026/05/background-philosophy.jpg');background-size:cover;background-position:center;filter:blur(3px);z-index:1}
.kkv-philosophy-overlay{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px;min-height:472px;background:linear-gradient(181.07deg,rgba(0,20,65,0.65) 32.74%,rgba(29,120,210,0.65) 107.82%);box-sizing:border-box}
.kkv-philosophy-content{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%}
.kkv-philosophy-title{font-family:'Inter',sans-serif;font-weight:700;font-size:40px;line-height:1.2;letter-spacing:-0.021em;text-align:center;color:#FDDC00;margin:0}
.kkv-philosophy-desc{font-family:'Inter',sans-serif;font-weight:400;font-size:18px;line-height:28px;letter-spacing:-0.006em;text-align:center;color:#FEFFFF;margin:0}
.kkv-philosophy-buttons{display:flex;flex-direction:row;gap:16px;margin-top:8px;flex-wrap:wrap;justify-content:center}

/* Buttons */
.kkv-btn{display:inline-flex;justify-content:center;align-items:center;padding:12px 32px;min-width:200px;height:52px;font-family:'Inter',sans-serif;font-weight:600;font-size:18px;line-height:28px;letter-spacing:-0.006em;text-decoration:none;border-radius:32px;box-shadow:0px 8px 10px 1px rgba(51,51,51,0.1);box-sizing:border-box;transition:all 0.25s ease;cursor:pointer}
.kkv-btn-outline{background:#FFFFFF;border:1px solid #1C4AB0;color:#1C4AB0}
.kkv-btn-outline:hover{background:#1C4AB0;color:#FFFFFF}
.kkv-btn-solid{background:#1C4AB0;border:2px solid #1C4AB0;color:#FFFFFF}
.kkv-btn-solid:hover{background:#163d91;border-color:#163d91}

/* Mission & Vision */
.kkv-mv-card{display:flex;flex-direction:column;align-items:center;gap:32px}
.kkv-mv-row{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:32px;padding:16px 0;width:100%}
.kkv-mv-image{flex:0 0 35%;aspect-ratio:360/240;background-size:cover;background-position:center;border-radius:24px}
.kkv-mission-image{background-image:url('http://kanalab-staging.my.id/wp-content/uploads/2026/05/Mission-about-img-kanalab.png')}
.kkv-vision-image{background-image:url('http://kanalab-staging.my.id/wp-content/uploads/2026/05/Vision-about-img-kanalab.png')}
.kkv-mv-text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px;padding:24px;box-sizing:border-box}
.kkv-mv-title{font-family:'Inter',sans-serif;font-weight:700;font-size:40px;line-height:1.2;letter-spacing:-0.021em;color:#1C4AB0;margin:0 0 12px 0}
.kkv-mv-desc{font-family:'Inter',sans-serif;font-weight:400;font-size:18px;line-height:28px;letter-spacing:-0.006em;color:#575858;margin:0}
.kkv-mv-divider{width:calc(100% + 80px);margin-left:-40px;margin-right:-40px;height:8px;background:#F9FAFB}

/* Responsive */
@media (max-width:991px){
  .kkv-card{padding:24px 24px}
  .kkv-about-row,.kkv-mv-row{flex-direction:column;gap:24px}
  .kkv-about-image,.kkv-mv-image{width:100%;flex:0 0 auto;aspect-ratio:16/10}
  .kkv-about-title,.kkv-philosophy-title,.kkv-mv-title{font-size:32px}
  .kkv-mv-divider{width:calc(100% + 48px);margin-left:-24px;margin-right:-24px}
}
@media (max-width:640px){
  .kkv-card,.kkv-philosophy-overlay{padding:20px 16px}
  .kkv-about-title,.kkv-philosophy-title,.kkv-mv-title{font-size:26px}
  .kkv-about-desc,.kkv-philosophy-desc,.kkv-mv-desc{font-size:16px;line-height:26px}
  .kkv-philosophy-buttons{flex-direction:column;width:100%}
  .kkv-mv-divider{width:calc(100% + 32px);margin-left:-16px;margin-right:-16px}
  .kkv-btn{width:100%}
  .kkv-mv-text{padding:8px}
  .kkv-philosophy-overlay{min-height:auto}
}

/* ===========================================================================
 * PROOF / STATS section ([proof]) — desktop 4 kolom, mobile 2 kolom
 * ========================================================================= */
.kbr-proof__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:16px;background:linear-gradient(180deg,#FFFFFF -61.86%,rgba(254,255,244,0.75) 96.15%);border-radius:16px}
@media(min-width:768px){.kbr-proof__grid{grid-template-columns:repeat(4,1fr);padding:16px 0}}
.kbr-proof__card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;background:#FEFFFF;border:2px solid #F9DABB;border-radius:16px;padding:24px;box-shadow:0 2px 8px rgba(51,51,51,.1)}
.kbr-proof__top{display:flex;align-items:center;justify-content:center;gap:16px}
.kbr-proof__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;border-radius:8px;background:linear-gradient(180deg,#FFAF41 -4.69%,#03B39E 117.19%);color:#fff}
.kbr-proof__icon svg{width:20px;height:20px}
.kbr-proof__value{font-weight:600;font-size:24px;line-height:1.2;letter-spacing:-0.011em;color:#0F172A}
.kbr-proof__label{font-size:18px;font-weight:400;letter-spacing:-0.006em;color:#909090}
@media(max-width:480px){.kbr-proof__value{font-size:22px}.kbr-proof__label{font-size:15px}}