/* Extras for the Elementor demo page.
   Everything here is what Elementor free cannot express on its own.
   Each rule hooks a CSS class set in the widget's Advanced > CSS Classes field.
   Do not delete those classes in the editor, or the styling below stops applying. */

:root{
  --bkl-ink:#1B1310; --bkl-ink2:#3A2B21; --bkl-muted:#71604F; --bkl-line:#E9DECE;
  --bkl-cream:#FBF7F1; --bkl-cream2:#F4EDE2; --bkl-brand:#A55618; --bkl-brand-d:#7E3F10;
  --bkl-brand-soft:#FDF0E2; --bkl-wood3:#DEAC70; --bkl-bark:#5E3A1E; --bkl-ok:#1E7A4B;
}

body.elementor-page{
  font-family:'Sarabun',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bkl-cream); color:var(--bkl-ink);
}
body.elementor-page .e-con{scroll-margin-top:88px}

/* eyebrow pill */
.bkl-eyebrow .elementor-heading-title{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Kanit',sans-serif;font-weight:500;font-size:.83rem;letter-spacing:.09em;
  color:var(--bkl-brand);background:var(--bkl-brand-soft);border:1px solid #F2DEC6;
  padding:6px 14px;border-radius:100px;line-height:1.6}
.bkl-eyebrow .elementor-heading-title::before{
  content:"";width:6px;height:14px;border-radius:2px;flex:none;
  background:linear-gradient(180deg,var(--bkl-wood3),var(--bkl-bark))}
.bkl-eyebrow-dark .elementor-heading-title{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:var(--bkl-wood3)}

/* sticky header */
.bkl-hdr{position:sticky;top:0;z-index:60;
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.bkl-hdr.is-stuck{border-bottom-color:var(--bkl-line);box-shadow:0 6px 24px rgba(27,19,16,.06)}
.bkl-nav .elementor-icon-list-item a{padding:9px 14px;border-radius:100px;transition:.18s}
.bkl-nav .elementor-icon-list-item a:hover{background:var(--bkl-cream2)}
.bkl-nav .elementor-icon-list-item.is-on a{color:var(--bkl-brand);background:var(--bkl-brand-soft)}
.bkl-nav .elementor-icon-list-icon{display:none}

/* hero */
.bkl-hero{position:relative;overflow:hidden}
.bkl-hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.1;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 1px,transparent 1px 84px)}
.bkl-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(1000px 480px at 74% 8%,rgba(222,172,112,.26),transparent 62%),
             radial-gradient(700px 400px at 5% 96%,rgba(165,86,24,.22),transparent 60%)}
.bkl-hero > .e-con-inner{position:relative;z-index:1}
.bkl-hero-art{position:relative}
.bkl-hero-img img{aspect-ratio:4/3.35;object-fit:cover;width:100%;
  box-shadow:0 10px 24px rgba(27,19,16,.08),0 28px 64px rgba(27,19,16,.12)}
.bkl-hero-badge{position:absolute;left:-14px;bottom:26px;max-width:270px;
  background:#fff;border-radius:18px;padding:14px 18px;
  box-shadow:0 10px 24px rgba(27,19,16,.14)}
.bkl-hero-badge .elementor-icon{background:var(--bkl-brand-soft);border-radius:12px;padding:10px}

/* chip-style icon lists */
.bkl-tags .elementor-icon-list-item,
.bkl-spec .elementor-icon-list-item,
.bkl-areas .elementor-icon-list-item,
.bkl-logos .elementor-icon-list-item{
  background:var(--bkl-cream2);border:1px solid var(--bkl-line);
  border-radius:100px;padding:5px 13px}
.bkl-spec .elementor-icon-list-item{border-radius:6px;padding:4px 9px}
.bkl-logos .elementor-icon-list-item{background:transparent;border-color:rgba(255,255,255,.18)}
.bkl-tags .elementor-icon-list-icon,
.bkl-spec .elementor-icon-list-icon,
.bkl-areas .elementor-icon-list-icon,
.bkl-logos .elementor-icon-list-icon,
.bkl-nav .elementor-icon-list-icon{display:none}

/* about images */
.bkl-fig img{aspect-ratio:3/4;object-fit:cover;width:100%;
  box-shadow:0 4px 10px rgba(27,19,16,.05),0 12px 32px rgba(27,19,16,.08)}
.bkl-fig-up{margin-top:28px}

/* why-us icon tile */
.bkl-why-icon .elementor-icon{
  background:linear-gradient(140deg,var(--bkl-wood3),#C89153);border-radius:15px}

/* service rows */
.bkl-catfig{position:relative}
.bkl-catfig img{aspect-ratio:16/11;object-fit:cover;width:100%;
  box-shadow:0 4px 10px rgba(27,19,16,.05),0 12px 32px rgba(27,19,16,.08)}
.bkl-catno{position:absolute;top:14px;left:14px;z-index:2;margin:0}
.bkl-catno .elementor-heading-title{
  background:rgba(27,19,16,.8);color:#fff;backdrop-filter:blur(6px);
  padding:6px 13px;border-radius:100px;display:inline-block}

/* product cards + filter */
.bkl-pimg{position:relative;overflow:hidden;border-radius:20px 20px 0 0}
.bkl-pimg img{aspect-ratio:4/3;object-fit:cover;width:100%;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.bkl-pcard:hover .bkl-pimg img{transform:scale(1.06)}
.bkl-ptag{position:absolute;top:12px;left:12px;z-index:2;margin:0}
.bkl-ptag .elementor-heading-title{
  background:rgba(27,19,16,.82);color:#fff;backdrop-filter:blur(6px);
  padding:5px 12px;border-radius:100px;display:inline-block}
.bkl-pcard{overflow:hidden;transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s}
.bkl-pcard:hover{transform:translateY(-5px);
  box-shadow:0 4px 10px rgba(27,19,16,.05),0 12px 32px rgba(27,19,16,.08)}
.bkl-pcard.is-hidden{display:none}
.bkl-pcard .bkl-quote{margin-top:auto}
.bkl-chip .elementor-button{transition:.18s}
.bkl-chip:not(.is-on) .elementor-button:hover{border-color:var(--bkl-bark)}

/* reviews */
.bkl-revwho{margin-top:auto;border-top:1px solid var(--bkl-line);padding-top:14px}
.bkl-revwho .elementor-icon{
  background:linear-gradient(140deg,var(--bkl-wood3),#C89153);border-radius:50%}

/* service table (Elementor free has no table widget) */
.bkl-tbl .tbl-wrap{overflow-x:auto;border:1px solid var(--bkl-line);border-radius:24px;
  background:#fff;box-shadow:0 1px 2px rgba(27,19,16,.06),0 2px 8px rgba(27,19,16,.05)}
.bkl-tbl table{width:100%;border-collapse:collapse;min-width:660px}
.bkl-tbl thead th{background:var(--bkl-ink);color:#fff;font-family:'Kanit',sans-serif;
  font-weight:500;font-size:.95rem;text-align:left;padding:16px 20px;white-space:nowrap}
.bkl-tbl tbody td{padding:18px 20px;border-top:1px solid var(--bkl-line);vertical-align:top;
  font-size:.96rem;color:var(--bkl-ink2);line-height:1.75}
.bkl-tbl tbody tr:hover{background:var(--bkl-cream)}
.bkl-tbl tbody td:first-child{font-family:'Kanit',sans-serif;font-weight:500;
  color:var(--bkl-ink);white-space:nowrap}
.bkl-tbl tbody td small{display:block;color:var(--bkl-muted);font-size:.85rem;margin-top:3px}
.bkl-tbl .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* quote form (Elementor free has no form widget) */
.bkl-formwrap .form-card{background:#fff;border:1px solid var(--bkl-line);border-radius:24px;
  padding:32px;box-shadow:0 1px 2px rgba(27,19,16,.06),0 2px 8px rgba(27,19,16,.05)}
.bkl-formwrap h3{font-family:'Kanit',sans-serif;font-weight:600;font-size:1.35rem;
  margin:0 0 6px;color:var(--bkl-ink);line-height:1.35}
.bkl-formwrap .muted{color:var(--bkl-muted)}
.bkl-formwrap .field{margin-bottom:16px}
.bkl-formwrap .field label{display:block;font-family:'Kanit',sans-serif;font-weight:500;
  font-size:.93rem;margin-bottom:7px;color:var(--bkl-ink2)}
.bkl-formwrap .field label .req{color:var(--bkl-brand)}
.bkl-formwrap .field input,.bkl-formwrap .field select,.bkl-formwrap .field textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--bkl-line);border-radius:12px;
  background:var(--bkl-cream);font-family:'Sarabun',sans-serif;font-size:1rem;
  color:var(--bkl-ink);transition:.18s;box-sizing:border-box}
.bkl-formwrap .field input:focus,.bkl-formwrap .field select:focus,.bkl-formwrap .field textarea:focus{
  outline:none;border-color:var(--bkl-brand);background:#fff;box-shadow:0 0 0 4px rgba(165,86,24,.1)}
.bkl-formwrap .field textarea{min-height:112px;resize:vertical}
.bkl-formwrap .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bkl-formwrap .form-note{font-size:.84rem;color:var(--bkl-muted);margin:12px 0 0;text-align:center}
.bkl-formwrap .form-ok{display:none;background:#EAF6EF;border:1.5px solid #BFE3CF;
  border-radius:16px;padding:20px;margin-bottom:18px}
.bkl-formwrap .form-ok.show{display:block}
.bkl-formwrap .form-ok b{font-family:'Kanit',sans-serif;color:var(--bkl-ok);
  display:flex;align-items:center;gap:8px;margin-bottom:6px}
.bkl-formwrap .form-ok p{font-size:.93rem;color:#2E5C43;margin:0}
.bkl-formwrap .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Kanit',sans-serif;font-weight:500;font-size:1rem;padding:14px 26px;
  border-radius:100px;border:1.5px solid transparent;text-decoration:none;cursor:pointer;
  transition:.18s;line-height:1}
.bkl-formwrap .btn-primary{background:var(--bkl-brand);color:#fff;
  box-shadow:0 4px 14px rgba(165,86,24,.32)}
.bkl-formwrap .btn-primary:hover{background:var(--bkl-brand-d)}
.bkl-formwrap .btn-dark{background:var(--bkl-ink);color:#fff}
.bkl-formwrap .btn-line{background:#06C755;color:#fff}
.bkl-formwrap .btn-lg{padding:17px 34px;font-size:1.06rem}
.bkl-formwrap .btn-sm{padding:10px 18px;font-size:.92rem}
.bkl-formwrap .btn-block{width:100%}

/* closing CTA: wood gradient + plank stripes over the editable base colour */
.bkl-cta{position:relative;overflow:hidden;
  background-image:linear-gradient(150deg,#2A1B12,#4A2F1A 55%,#6B441F)}
.bkl-cta::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.1;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 1px,transparent 1px 70px)}
.bkl-cta > .e-con-inner,.bkl-cta > *{position:relative;z-index:1}

/* fixed contact bar (phone only) */
.bkl-mbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding-bottom:calc(10px + env(safe-area-inset-bottom))!important}
.bkl-mbar .elementor-button{width:100%;padding:14px 8px;font-size:.98rem}
.bkl-mbar .elementor-widget-button{flex:1}

@media (max-width:1024px){
  .bkl-nav,.bkl-navwrap{display:none}
}
@media (max-width:600px){
  .bkl-brand .elementor-widget-heading:last-child{display:none}
}
@media (max-width:767px){
  .bkl-hdr-tel{display:none}
  .bkl-hero-badge{position:static;margin-top:14px;max-width:none}
  .bkl-fig-up{margin-top:0}
  .bkl-formwrap .form-card{padding:22px}
  .bkl-formwrap .field-row{grid-template-columns:1fr}
  .bkl-mbar{display:block}
  body.elementor-page{padding-bottom:78px}
}
@media (prefers-reduced-motion:reduce){
  .bkl-pcard,.bkl-pimg img{transition:none!important}
  .bkl-pcard:hover{transform:none}
}

/* header stays a single row at every width */
.bkl-hdr .e-con-inner > .e-con{flex-wrap:nowrap}
.bkl-brand .elementor-widget-heading .elementor-heading-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* nav with catalog link: keep 7 items tidy */
.bkl-nav .elementor-icon-list-items{flex-wrap:wrap;row-gap:2px}
@media (max-width:1280px){.bkl-nav .elementor-icon-list-item a{padding:8px 10px;font-size:15px}}
/* clickable product cards */
.bkl-pcard .elementor-widget-image a{display:block}
.bkl-pcard .elementor-heading-title a{color:inherit;text-decoration:none}
.bkl-pcard .elementor-heading-title a:hover{color:var(--bkl-brand)}

/* LINE QR card in the hero (homepage only) */
.bkl-qr{align-self:flex-start;max-width:365px;box-shadow:0 10px 28px rgba(0,0,0,.18)}
.bkl-qr > .e-con-inner > .elementor-widget-image,
.bkl-qr > .elementor-widget-image{flex:0 0 auto;width:126px}
.bkl-qr img{display:block;width:126px;height:auto;aspect-ratio:1/1}
@media (max-width:767px){.bkl-qr{max-width:100%;align-self:stretch}}