/* ============ ANTI-FLASH LOADING STATE ============ */
  body.bs-loading{ opacity:0 !important; animation:bs-reveal-fallback 1.2s forwards; }
  body{ transition:opacity 0.18s ease; }
  @keyframes bs-reveal-fallback{ 0%,92%{opacity:0;} 100%{opacity:1;} }

  /* ============ TOKENS ============ */
  #bs-app{
    color-scheme: light;
    --navy-950:#1E1A17;
    --navy-900:#2A2421;
    --navy-800:#3B332E;
    --navy-700:#4A4038;
    --gold-600:#B8935C;
    --gold-500:#D1B48C;
    --gold-300:#E8D7BC;
    --gold-100:#F4EBDD;
    --taupe:#EFECE6;
    --cream:#FDFBF7;
    --white:#FFFFFF;
    --ink-900:#5D432C;
    --ink-500:#8A7F73;
    --ink-300:#CBBBA3;
    --line:#E7E1D5;
    --radius-lg:26px;
    --radius-md:18px;
    --radius-sm:12px;
    --shadow-soft:0 12px 30px -14px rgba(42,36,33,0.28);
    --shadow-card:0 8px 22px -10px rgba(42,36,33,0.14);
    --font-display:'IBM Plex Sans Thai', sans-serif;
    --font-headline:'IBM Plex Sans Thai', sans-serif;
    --font-logo:'IBM Plex Sans Thai', sans-serif;
    --font-body:'IBM Plex Sans Thai', sans-serif;

    all:initial;
    *,*::before,*::after{box-sizing:border-box}
    display:block;
    font-family:var(--font-body);
    color:var(--ink-900);
    background:#E9E2D2;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  #bs-app *{ box-sizing:border-box; }
  #bs-app a, #bs-app button, #bs-app [onclick]{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  #bs-app button{font-family:inherit; cursor:pointer; margin:0; -webkit-appearance:none; appearance:none; text-align:inherit;}
  #bs-app a{ text-decoration:none; color:inherit; }
  #bs-app ul{ list-style:none; margin:0; padding:0; }
  #bs-app h1,#bs-app h2,#bs-app h3,#bs-app p{ margin:0; }
  #bs-app :focus-visible{ outline:2px solid var(--gold-500); outline-offset:2px; }

  /* ============ APP FRAME ============ */
  /* inner pages: cancel the theme's side padding so the app + hero banner are edge-to-edge like the home page */
  .has-global-padding > #bs-app{ margin-left:calc(-1 * var(--wp--style--root--padding-left, 0px)) !important; margin-right:calc(-1 * var(--wp--style--root--padding-right, 0px)) !important; max-width:none !important; width:auto !important; }
  .bs-frame{
    width:100%;
    max-width:100%;
    margin:0 auto;
    background:var(--cream);
    min-height:100vh;
    position:relative;
    overflow:hidden;
    padding-bottom:170px;
  }
  .bs-contactcard, .bs-listing, .bs-service, .bs-catcard, .bs-pcard,
  .bs-article, .bs-badgechip, .bs-quickcard, .bs-reviewcard{
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
  }

  /* ============ HEADER ============ */
  .bs-header{
    color:var(--white);
    padding:18px 22px 34px;
    position:relative;
    overflow:hidden;
    border-radius:0 0 28px 28px;
  }
  .bs-header::before{
    content:"";
    position:absolute; top:0; left:0; right:0; bottom:0;
    background-image:url('assets/header-bg.jpg');
    background-size:cover;
    background-position:center;
    opacity:0.5;
    z-index:0;
  }
  .bs-header::after{
    content:"";
    position:absolute; top:0; left:0; right:0; bottom:0;
    background:
      radial-gradient(120% 140% at 100% 0%, rgba(198,161,91,0.20), transparent 55%),
      linear-gradient(160deg, rgba(59,51,46,0.80) 0%, rgba(42,36,33,0.86) 55%, rgba(30,26,23,0.90) 100%);
    z-index:1;
  }
  .bs-header > *{ position:relative; z-index:2; }
  .bs-crestrow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px;
  }
  .bs-brand{ display:flex; align-items:center; gap:12px; }
  .bs-logo-mark{
    display:inline-block;
    width:32px;
    height:19px;
    object-fit:contain;
    object-position:left center;
    flex-shrink:0;
  }
  .bs-brandname{ line-height:1.1; }
  .bs-brandname .en{
    font-family:var(--font-display); font-size:19px; letter-spacing:0.03em; font-weight:600;
    display:block; color:var(--white);
  }
  .bs-brandname .sub{
    font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-300);
    display:block; margin-top:2px;
  }
  .bs-badge{
    display:inline-flex; align-items:center; justify-content:center; gap:4px;
    background:rgba(198,161,91,0.18);
    border:1.5px solid rgba(209,180,140,0.85);
    color:var(--gold-300);
    padding:7px 12px;
    border-radius:999px;
    font-size:11px; font-weight:700; letter-spacing:0.04em; line-height:1;
    white-space:nowrap; flex-shrink:0;
  }
  .bs-badge svg{ width:12px; height:12px; flex-shrink:0; display:block; position:relative; top:1px; }

  .bs-headline{
    font-family:var(--font-headline);
    font-weight:600;
    font-size:17px;
    line-height:1.36;
    letter-spacing:-0.01em;
    max-width:360px;
    margin:0 auto 8px !important;
    text-align:center !important;
  }
  .bs-headline .bs-logofont{
    font-family:var(--font-logo);
    color:var(--gold-300);
    font-weight:400;
    font-size:1.35em;
    line-height:1;
    vertical-align:-0.08em;
  }
  .bs-sub{
    font-size:11.5px; color:var(--ink-300); line-height:1.45; max-width:320px;
    margin:0 auto 12px !important; text-align:center !important;
  }
  .bs-pagehead{
    font-family:var(--font-display); font-weight:600; font-size:28px; margin-bottom:6px;
  }
  .bs-pagesub{ font-size:13px; color:var(--ink-300); max-width:300px; line-height:1.55; }

  .bs-stats{ display:flex; align-items:center; gap:6px; flex-wrap:nowrap; justify-content:center; }
  .bs-stat{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:999px;
    padding:5px 9px;
    font-size:9.5px;
    line-height:1;
    color:var(--white);
    white-space:nowrap;
    flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center; gap:4px;
  }
  .bs-stat svg{ width:11px; height:11px; color:var(--gold-300); flex-shrink:0; display:block; }

  /* ============ QUICK ACTIONS (floating card) ============ */
  .bs-quickcard{
    background:var(--white);
    border-radius:22px;
    box-shadow:var(--shadow-card);
    margin:0 14px;
    position:relative;
    z-index:10;
    top:-30px;
    padding:20px 10px 16px;
    display:flex;
    justify-content:space-around;
  }
  .bs-quickitem{
    display:flex; flex-direction:column; align-items:center; gap:9px;
    background:none; border:none; color:var(--ink-900);
    width:31%;
  }
  .bs-quickicon{
    width:52px; height:52px; border-radius:50%;
    background:linear-gradient(160deg, var(--gold-100), var(--gold-300) 130%);
    display:flex; align-items:center; justify-content:center;
    color:#5D432C;
  }
  .bs-quickicon svg{ width:22px; height:22px; }
  .bs-quickitem span{ font-size:11.5px; font-weight:600; letter-spacing:0.01em; text-align:center; }

  .bs-quickcard-single{ padding:4px; display:block; }
  .bs-cta-main{
    width:100%; border:none; display:flex; align-items:center; gap:8px;
    background:linear-gradient(135deg, var(--gold-300), var(--gold-600));
    border-radius:18px; padding:9px 11px; text-align:left;
  }
  .bs-cta-main-icon{
    width:34px; height:34px; border-radius:50%; flex-shrink:0;
    background:var(--navy-900); color:var(--gold-300);
    display:flex; align-items:center; justify-content:center;
  }
  .bs-cta-main-icon svg{ width:16px; height:16px; }
  .bs-cta-main-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
  .bs-cta-main-text strong{ font-size:clamp(12px, 3.6vw, 15px); color:#5D432C; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bs-cta-main-text small{ font-size:clamp(9px, 2.6vw, 10.5px); color:#5D432C; opacity:0.75; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
  .bs-cta-main-arrow{ flex-shrink:0; color:#5D432C; width:20px; height:20px; }
  .bs-cta-main-arrow svg{ width:100%; height:100%; }

  /* ============ CONTENT SHEET ============ */
  .bs-sheet{
    background:var(--cream);
    margin-top:-30px;
    position:relative;
    padding:6px 20px 30px;
  }
  .bs-sheet.no-quick{ margin-top:0; border-radius:22px 22px 0 0; padding-top:26px; }

  .bs-sectionhead{
    display:flex; align-items:baseline; justify-content:space-between;
    margin:26px 0 14px;
  }
  .bs-sectionhead h2{
    font-family:var(--font-display); font-weight:600; font-size:21px; color:#5D432C;
  }
  .bs-linkheading{
    background:none; border:none; padding:0; font:inherit; color:inherit; cursor:pointer;
    display:inline-flex; align-items:center; gap:6px;
  }
  .bs-linkheading::after{
    content:"›"; color:var(--gold-600); font-size:0.9em; font-weight:700;
  }
  .bs-sectionhead .bs-viewall{
    font-size:12.5px; color:var(--gold-600); font-weight:700; letter-spacing:0.02em;
    background:none; border:none; padding:0; margin:0; cursor:pointer; font-family:inherit;
    -webkit-appearance:none; appearance:none;
    display:inline-flex; align-items:center; gap:2px;
  }
  .bs-sectionhead .bs-viewall::after{
    content:"›"; font-size:1.15em; font-weight:700; line-height:1;
  }
  .bs-eyebrow{
    font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-600);
    font-weight:700; margin-bottom:4px; display:block;
  }

  /* ---- video review cards (2-column) ---- */
  .bs-reviewgrid{ display:flex; gap:14px; overflow-x:auto; margin:0 -20px 8px; padding:0 20px 4px; scrollbar-width:none; }
  .bs-reviewgrid.bs-reviewgrid-full{ display:grid; grid-template-columns:repeat(2,1fr); overflow:visible; margin:0 0 8px; padding:0; }
  .bs-reviewgrid.bs-reviewgrid-full .bs-reviewcard{ flex:unset; }
  .bs-reviewgrid::-webkit-scrollbar{ display:none; }
  .bs-reviewcard{ display:flex; flex-direction:column; gap:9px; flex:0 0 44%; }
  .bs-reviewmedia{
    position:relative;
    width:100%;
    padding-top:135%;
    aspect-ratio:20/27;
    border-radius:16px;
    overflow:hidden;
    background:linear-gradient(160deg, var(--navy-800), var(--navy-950));
    box-shadow:var(--shadow-card);
  }
  .bs-playbtn{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:44px; height:44px; border-radius:50%; border:none;
    background:rgba(0,0,0,0.5); color:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .bs-playbtn svg{ width:17px; height:17px; margin-left:2px; }
  @media(max-width:600px){
    .bs-playbtn{ width:32px; height:32px; }
    .bs-playbtn svg{ width:12px; height:12px; margin-left:1.5px; }
  }
  .bs-reviewcaption{ font-size:10px; color:var(--ink-500); font-weight:600; text-align:center; }
  .bs-reviewdesc{ font-size:10.5px; color:var(--ink-500); font-weight:400; text-align:center; line-height:1.45; margin-top:-4px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

  /* ---- horizontal scroller (home featured) ---- */
  .bs-hscroll{
    display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; margin:0 -20px; padding-left:20px; padding-right:20px;
    scrollbar-width:none;
  }
  .bs-hscroll::-webkit-scrollbar{ display:none; }
  .bs-pcard{
    flex:0 0 154px;
    background:var(--white);
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
    overflow:hidden;
  }
  .bs-pcard-media{
    position:relative;
    width:100%;
    padding-top:100%;
    background:linear-gradient(150deg, var(--navy-800), var(--navy-950));
    overflow:hidden;
  }
  .bs-pcard-media svg{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:46px; height:46px; color:var(--gold-300); opacity:0.9;
  }
  .bs-hot{
    position:absolute; top:8px; left:8px;
    background:var(--gold-500); color:#5D432C;
    font-size:9px; font-weight:700; letter-spacing:0.04em;
    padding:3.5px 9px; border-radius:999px; border:none;
  }
  .bs-pcard-body{ padding:14px 14px 16px; }
  .bs-pcard-code{ font-size:9px; color:var(--ink-300); font-weight:600; margin-bottom:3px; }
  .bs-pcard-brand{ font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-500); font-weight:600; }
  .bs-pcard-name{ font-size:13px; font-weight:600; margin:4px 0 6px; line-height:1.4; }
  .bs-pcard-cond{ font-size:10px; color:var(--gold-600); font-weight:600; margin-bottom:6px; }
  .bs-pcard-price{ font-size:13px; font-weight:700; color:#5D432C; }
  .bs-pcard-price span{ font-size:10px; color:var(--ink-500); font-weight:500; display:block; margin-bottom:1px; }

  /* ---- CTA banner ---- */
  .bs-cta{
    margin:28px 0 8px;
    background:linear-gradient(135deg, var(--navy-900), var(--navy-950));
    border-radius:var(--radius-md);
    padding:22px;
    position:relative;
    overflow:hidden;
    color:var(--white);
  }
  .bs-cta::after{
    content:"";
    position:absolute; right:-30px; top:-30px; width:130px; height:130px; border-radius:50%;
    border:1px solid rgba(198,161,91,0.35);
  }
  .bs-cta h3{ font-family:var(--font-display); font-size:20px; font-weight:600; margin-bottom:6px; max-width:220px; }
  .bs-cta p{ font-size:12.5px; color:var(--ink-300); margin-bottom:16px; max-width:230px; line-height:1.6; }
  .bs-btn-gold{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    background:linear-gradient(140deg, var(--gold-300), var(--gold-600));
    color:var(--navy-950) !important; font-weight:700; font-size:12.5px;
    padding:11px 16px; border-radius:999px; border:none;
    white-space:nowrap; line-height:1;
  }
  .bs-btn-gold svg{ width:13px; height:13px; flex-shrink:0; display:block; position:relative; top:3px; }
  .bs-btn-gold-outline{
    padding:14px 34px !important;
    border:2px solid var(--gold-500) !important;
    box-shadow:0 0 0 1px rgba(209,180,140,0.3);
    text-align:center;
    min-width:120px;
  }

  /* ---- badge row ---- */
  .bs-badgerow{ display:flex; gap:10px; margin-top:22px; }
  .bs-badgechip{
    flex:1; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:14px 10px; text-align:center;
  }
  .bs-badgechip svg{ width:20px; height:20px; color:var(--gold-600); margin-bottom:6px; }
  .bs-badgechip span{ display:block; font-size:11px; font-weight:600; line-height:1.35; }

  /* ---- category grid (products page) ---- */
  .bs-filterrow{ display:flex; gap:8px; margin:22px 0 4px; flex-wrap:wrap; }
  .bs-filterchip{
    display:inline-flex; align-items:center; justify-content:center; line-height:1;
    font-size:11.5px; font-weight:700; padding:8px 15px; border-radius:999px;
    background:var(--taupe); color:var(--ink-500); border:1px solid transparent;
  }
  .bs-filterchip-active{ background:var(--gold-500); color:#5D432C; }

  .bs-toolbar{ display:flex; flex-direction:column; gap:8px; margin:16px 0 4px; }
  .bs-search-input{
    width:100%; border:1px solid var(--line); background:var(--white); border-radius:999px;
    padding:11px 16px; font-size:13px; font-family:inherit; color:var(--ink-900);
  }
  .bs-search-input:focus{ outline:none; border-color:var(--gold-500); }
  .bs-select-input{
    flex:1; border:1px solid var(--line); background:var(--white); border-radius:999px;
    padding:10px 14px; font-size:12.5px; font-family:inherit; color:var(--ink-900);
  }
  .bs-toolbar-row{ display:flex; gap:8px; }

  .bs-catgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .bs-catcard{
    background:var(--white); border-radius:var(--radius-md); padding:18px 14px;
    box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:10px;
  }
  .bs-catcard .bs-cicon{
    width:40px; height:40px; border-radius:12px; background:var(--gold-100);
    display:flex; align-items:center; justify-content:center; color:#5D432C;
  }
  .bs-catcard .bs-cicon svg{ width:19px; height:19px; }
  .bs-catcard h4{ font-size:14px; font-weight:700; }
  .bs-catcard p{ font-size:11px; color:var(--ink-500); }

  /* ---- listing rows (products) ---- */
  .bs-listing{
    display:flex; gap:14px; background:var(--white); border-radius:12px;
    padding:14px; box-shadow:0 4px 12px rgba(0,0,0,0.08); margin-bottom:12px; align-items:center;
  }
  .bs-listing-media{
    width:64px; height:64px; border-radius:14px; flex-shrink:0;
    background:linear-gradient(150deg, var(--navy-800), var(--navy-950));
    display:flex; align-items:center; justify-content:center;
  }
  .bs-listing-media svg{ width:28px; height:28px; color:var(--gold-300); }
  .bs-listing-body{ flex:1; min-width:0; }
  .bs-listing-brand{ font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-500); font-weight:700; }
  .bs-listing-name{ font-size:13.5px; font-weight:600; margin:2px 0 4px; }
  .bs-listing-tags{ display:flex; gap:6px; flex-wrap:wrap; }
  .bs-tag{ display:inline-flex; align-items:center; justify-content:center; line-height:1; font-size:9.5px; background:var(--gold-100); color:var(--gold-600); padding:4px 8px; border-radius:999px; font-weight:700; }
  .bs-tag-gold{ background:var(--gold-500); color:#5D432C; }
  .bs-listing-price{ text-align:right; flex-shrink:0; }
  .bs-listing-price strong{ font-size:14px; color:#5D432C; display:block; }
  .bs-listing-price span{ font-size:9.5px; color:var(--ink-500); }

  /* ---- services (accordion-style cards) ---- */
  .bs-service{
    background:var(--white); border-radius:var(--radius-md); padding:18px;
    box-shadow:var(--shadow-card); margin-bottom:14px;
    display:flex; gap:14px;
  }
  .bs-service .bs-sicon{
    width:46px; height:46px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(160deg, var(--navy-800), var(--navy-950));
    display:flex; align-items:center; justify-content:center; color:var(--gold-300);
  }
  .bs-service .bs-sicon svg{ width:21px; height:21px; }
  .bs-service .bs-servicemedia{ width:46px; height:46px; border-radius:14px; flex-shrink:0; background:var(--taupe); }
  .bs-service h3{ font-size:15.5px; font-weight:700; margin-bottom:5px; }
  .bs-service p{ font-size:12px; color:var(--ink-500); line-height:1.6; margin-bottom:10px; }
  .bs-link-gold{
    font-size:12px; font-weight:700; color:var(--gold-600); display:inline-flex; align-items:center; gap:5px;
    background:none; border:none; padding:0; margin:0; cursor:pointer; font-family:inherit;
    -webkit-appearance:none; appearance:none; text-decoration:none;
  }
  .bs-link-gold svg{ width:12px; height:12px; position:relative; top:2px; }

  /* ---- article back button (chip style, more visible than plain bs-link-gold) ---- */
  .bs-backbtn{
    display:inline-flex; align-items:center; gap:6px;
    background:var(--white); color:#5D432C;
    font-size:13px; font-weight:700; font-family:inherit;
    border:1.5px solid var(--gold-500); border-radius:999px;
    padding:9px 16px 9px 12px;
    box-shadow:var(--shadow-card);
    text-decoration:none; cursor:pointer;
  }
  .bs-backbtn svg{ width:15px; height:15px; color:var(--gold-600); flex-shrink:0; }
  .bs-backbtn:active{ background:var(--gold-100); }

  /* ---- articles: full-width cover-image card, image on top / meta below ---- */
  .bs-articlegrid{ display:flex; flex-direction:column; gap:20px; }
  .bs-article{
    display:block; background:var(--white); border-radius:16px; overflow:hidden;
    box-shadow:0 10px 26px -14px rgba(42,36,33,.35), 0 0 0 1px rgba(93,67,44,.06);
    text-decoration:none; color:inherit; transition:transform .18s ease, box-shadow .18s ease;
  }
  .bs-article:active{ transform:scale(.99); }
  @media (hover:hover){ .bs-article:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(42,36,33,.42), 0 0 0 1px rgba(184,147,92,.35); } }
  .bs-article-media{
    position:relative; width:100%; aspect-ratio:1200/630; overflow:hidden; line-height:0;
    background:linear-gradient(150deg, var(--gold-100), var(--gold-300));
  }
  .bs-article-media-icon{ display:flex; align-items:center; justify-content:center; color:#5D432C; }
  .bs-article-media-icon svg{ width:34px; height:34px; }
  .bs-article-img{ width:100%; height:100%; object-fit:cover; display:block; }
  .bs-article-body{ padding:14px 16px 16px; }
  .bs-article-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
  .bs-article-cat{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--gold-600); }
  .bs-article-date{ font-size:10.5px; color:var(--ink-500); font-weight:600; letter-spacing:.02em; white-space:nowrap; }
  .bs-article h3{ font-size:15.5px; font-weight:700; margin:0 0 6px; line-height:1.4; color:#4A3524; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .bs-article p{ font-size:12.5px; color:var(--ink-500); line-height:1.6; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

  /* ---- contact ---- */
  .bs-contactcard{
    display:flex; align-items:center; gap:14px; background:var(--white);
    border-radius:var(--radius-md); padding:15px; box-shadow:var(--shadow-card); margin-bottom:12px;
    text-decoration:none;
  }
  .bs-contactcard .bs-cicon2{
    width:44px; height:44px; border-radius:50%; flex-shrink:0;
    background:var(--gold-100); display:flex; align-items:center; justify-content:center; color:#5D432C;
  }
  .bs-contactcard .bs-cicon2 svg{ width:19px; height:19px; }
  .bs-contactcard .bs-cctext{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
  .bs-contactcard .bs-cctitle{ font-size:13.5px; font-weight:700; color:var(--ink-900); }
  .bs-contactcard .bs-ccsub{ font-size:12px; color:var(--ink-500); }
  .bs-contactcard .bs-chevron{ margin-left:auto; color:var(--ink-300); width:16px; height:16px; flex-shrink:0; }

  .bs-hours{
    background:var(--navy-900); color:var(--white); border-radius:var(--radius-md);
    padding:18px; margin:20px 0; display:flex; justify-content:space-between; align-items:center;
  }
  .bs-hours h4{ font-size:13px; font-weight:700; margin-bottom:4px; }
  .bs-hours p{ font-size:11.5px; color:var(--gold-300); }
  .bs-hours svg{ width:26px; height:26px; color:var(--gold-300); }

  .bs-form{ margin-top:22px; }
  .bs-form label{ font-size:11.5px; font-weight:700; display:block; margin-bottom:6px; color:#5D432C; }
  .bs-form input, .bs-form textarea{
    width:100%; border:1px solid var(--line); background:var(--white); border-radius:var(--radius-sm);
    padding:12px 14px; font-size:13px; font-family:inherit; margin-bottom:14px; color:var(--ink-900);
  }
  .bs-form textarea{ resize:vertical; min-height:80px; }
  .bs-form button{
    width:100%; border:none; background:linear-gradient(140deg, var(--gold-300), var(--gold-600));
    color:var(--navy-950); font-weight:700; font-size:13.5px; padding:14px; border-radius:999px;
  }

  /* ============ FLOATING LINE BUTTON ============ */
  .bs-linefab{
    position:fixed; right:16px; top:50%; z-index:65;
    transform:translateY(-50%);
    width:52px; height:52px; border-radius:50%; border:none;
    background:#06C755; color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 24px -6px rgba(6,199,85,0.55), 0 4px 10px rgba(0,0,0,0.2);
    transition:transform 0.2s ease;
  }
  .bs-linefab:active{ transform:translateY(-50%) scale(0.92); }
  .bs-linefab svg{ width:26px; height:26px; }

  /* ============ BOTTOM NAV ============ */
  .bs-bottomnav{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    width:100%;
    background:var(--white);
    border-top:1px solid var(--line);
    display:flex;
    padding:10px 6px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px -18px rgba(12,28,61,0.4);
  }
  .bs-navbtn{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    background:none; border:1px solid transparent; border-radius:8px; color:var(--ink-300); padding:4px 1px 3px;
    min-width:0;
    transition:border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
  }
  .bs-navbtn svg{ width:18px; height:18px; margin:0; padding:0; display:block; flex-shrink:0; }
  .bs-navbtn span{ font-size:10px; font-weight:600; margin:0; padding:0; line-height:1; display:block; white-space:nowrap; }
  .bs-navbtn.active{ color:var(--gold-600); border-color:var(--gold-500); }
  /* Tap area: the bar has 10px padding top/bottom (+6px at the sides), and taps that
     landed there hit the bar, not a button - about a third of the bar did nothing,
     so people had to tap twice. The ::after stretches each button over the full bar
     height (incl. the iPhone safe area) without changing how anything looks. */
  .bs-navbtn{ position:relative; touch-action:manipulation; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
  .bs-navbtn::after{ content:""; position:absolute; left:-1px; right:-1px; top:-11px; bottom:calc(-11px - env(safe-area-inset-bottom)); }
  .bs-navbtn:first-child::after{ left:-7px; }
  .bs-navbtn:last-child::after{ right:-7px; }
  .bs-navbtn svg, .bs-navbtn span{ pointer-events:none; }
  /* Instant feedback the moment a finger touches a button (before the next page loads) */
  .bs-navbtn.is-pressed{ background:var(--gold-100); border-color:var(--gold-500); transition:none; }
  #bs-navprogress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:100000; pointer-events:none;
    background:linear-gradient(90deg,var(--gold-500),var(--gold-600)); box-shadow:0 0 8px rgba(184,147,92,.6);
    transition:width 2.2s cubic-bezier(.1,.7,.2,1), opacity .25s ease; }
  #bs-navprogress.run{ width:82%; }


  /* ---- send-photo bar (sits on top of the bottom nav) ---- */
  @keyframes bsConsultShine{ 0%,55%{ left:-60%; } 85%,100%{ left:130%; } }
  .bs-sendbar{
    position:relative;
    display:flex; align-items:center; gap:10px;
    background:#5D432C; padding:8px 12px; border-radius:14px 14px 0 0;
  }
  .bs-sendbar-main{
    position:relative; flex:1; min-width:0; display:flex; align-items:center; gap:10px;
    border:0; border-radius:999px; cursor:pointer; text-align:left; color:#fff; font-family:inherit;
    padding:6px 14px 6px 6px; overflow:hidden;
    background:linear-gradient(180deg,#6B5241 0%,#4E3A2C 100%);
    box-shadow:0 0 0 1.5px #D1B48C, inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 14px -8px rgba(0,0,0,0.4);
    -webkit-tap-highlight-color:transparent; transition:transform .15s ease;
  }
  .bs-sendbar-main:active{ transform:scale(0.97); }
  .bs-sendbar-main::after{
    content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,0.22),transparent);
    transform:skewX(-18deg); animation:bsConsultShine 4.5s ease-in-out 2.4s infinite; pointer-events:none;
  }
  @media (prefers-reduced-motion:reduce){ .bs-sendbar-main::after{ animation:none; display:none; } }
  .bs-sendbar-ico{
    flex:0 0 auto; width:36px; height:36px; border-radius:50%; background:#FDFBF7;
    display:flex; align-items:center; justify-content:center; color:#4E3A2C;
    box-shadow:0 0 0 2.5px rgba(209,180,140,0.35);
  }
  .bs-sendbar-cam{ width:20px; height:20px; flex:0 0 auto; }
  .bs-sendbar-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;
    border-left:1px solid rgba(232,215,188,0.45); padding-left:10px; }
  .bs-sendbar-text strong{ font-size:14px; font-weight:600; line-height:1.2; }
  .bs-sendbar-text small{ font-size:10.5px; line-height:1.2; color:#E8D7BC; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bs-sendbar-arrow{ width:16px; height:16px; flex:0 0 auto; color:#E8D7BC; }
  .bs-sendbar-line{
    flex:0 0 auto; width:46px; height:46px; border-radius:50%; padding:0;
    background:#4A3322; border:1.5px solid rgba(255,255,255,0.55);
    display:flex; align-items:center; justify-content:center;
  }
  .bs-sendbar-line svg{ width:28px; height:28px; }


  /* ---- dark-brown text (home + bottom nav) ---- */
  #screen-home{ color:#5D432C; }
  #screen-home .bs-reviewcaption,
  #screen-home .bs-badgechip span,
  #screen-home .bs-badgechip{ color:#5D432C; }
  #screen-home .bs-badgechip svg{ color:#5D432C; }
  .bs-navbtn, .bs-navbtn.active{ color:#5D432C; }


  /* ---- dock: send bar + bottom nav move together as ONE fixed layer (fixes nav vanishing while iOS Safari's toolbar collapses) ---- */
  .bs-dock{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0);
    will-change:transform; -webkit-backface-visibility:hidden; backface-visibility:hidden;
  }
  .bs-dock .bs-bottomnav{ position:relative; left:auto; right:auto; bottom:auto; z-index:auto; }
  /* white skirt under the dock: when iOS Chrome/Safari's toolbar collapses, the fixed dock lags above the new screen bottom and page content showed through the gap */
  .bs-dock::after{ content:""; position:absolute; left:0; right:0; top:100%; height:160px; background:var(--white); pointer-events:none; }
  .bs-sectionhead.bs-sh2{ align-items:center !important; }
  .bs-sectionhead.bs-sh2 .bs-viewall{ align-self:center; line-height:1; margin:0; }

  /* ============ SCREENS ============ */
  .bs-screen{ display:none; }
  .bs-screen.active{ display:block; animation:bsFade 0.35s ease; }
  @keyframes bsFade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
  @media (prefers-reduced-motion: reduce){
    .bs-screen.active{ animation:none; }
  }

  /* ============ GRID WRAPPERS (become multi-column on desktop) ============ */
  .bs-listgrid > .bs-listing:last-child,
  .bs-servicegrid > .bs-service:last-child,
  .bs-articlegrid > .bs-article:last-child{ margin-bottom:0; }

  /* ============ DESKTOP / WIDE SCREEN LAYOUT ============ */
  @media(min-width:99999px){
    .bs-header{
      max-width:1180px; margin:0 auto;
      padding:64px 48px 96px;
      border-radius:0 0 44px 44px;
    }
    .bs-logo-mark{ width:48px; height:29px; }
    .bs-brandname .en{ font-size:22px; }
    .bs-headline{ font-size:34px; max-width:620px; line-height:1.4; }
    .bs-sub{ font-size:15.5px; max-width:520px; margin-bottom:26px; }
    .bs-pagehead{ font-size:44px; }
    .bs-pagesub{ font-size:15px; max-width:540px; }
    .bs-stats{ gap:10px; flex-wrap:nowrap; }
    .bs-stat{ font-size:12px; padding:8px 14px; }
    .bs-stat svg{ width:13px; height:13px; }
    .bs-badge{ padding:8px 14px; }
    .bs-badge svg{ width:13px; height:13px; }

    .bs-quickcard{
      max-width:1180px; margin:0 auto; top:-46px;
      padding:26px 64px; border-radius:26px;
    }
    .bs-quickitem{ width:auto; flex-direction:row; gap:16px; }
    .bs-quickicon{ width:58px; height:58px; }
    .bs-quickicon svg{ width:24px; height:24px; }
    .bs-quickitem span{ font-size:14.5px; }
    .bs-quickcard-single{ padding:18px 24px; }
    .bs-cta-main{ padding:20px 28px; gap:20px; }
    .bs-cta-main-icon{ width:58px; height:58px; }
    .bs-cta-main-icon svg{ width:26px; height:26px; }

    .bs-sheet{ max-width:1180px; margin:-48px auto 0; padding:6px 48px 90px; }
    .bs-sheet.no-quick{ margin-top:-16px; padding-top:44px; }

    .bs-sectionhead h2{ font-size:25px; }
    .bs-sectionhead .bs-viewall{ font-size:13px; }

    .bs-reviewgrid{ display:grid; grid-template-columns:repeat(4,1fr); max-width:100%; gap:24px; overflow:visible; margin:0 0 8px; padding:0; }
    .bs-reviewcard{ flex:unset; }
    .bs-reviewmedia{ padding-top:120%; }
    .bs-playbtn{ width:64px; height:64px; }
    .bs-playbtn svg{ width:24px; height:24px; }
    .bs-reviewcaption{ font-size:13px; }
    .bs-reviewdesc{ font-size:12.5px; -webkit-line-clamp:2; }

    .bs-hscroll{
      display:grid; grid-template-columns:repeat(4, 1fr); gap:22px;
      overflow:visible; margin:0; padding:0;
    }
    .bs-pcard{ flex:unset; }
    .bs-pcard-media svg{ width:54px; height:54px; }
    .bs-pcard-name{ font-size:14px; }

    .bs-cta{
      padding:44px 60px; display:flex; align-items:center; justify-content:space-between; gap:40px;
    }
    .bs-cta h3{ font-size:26px; max-width:380px; }
    .bs-cta p{ font-size:14px; max-width:380px; margin-bottom:0; }
    .bs-cta .bs-btn-gold{ flex-shrink:0; padding:14px 26px; font-size:13.5px; }

    .bs-badgerow{ max-width:720px; gap:16px; }
    .bs-badgechip{ padding:20px 14px; }
    .bs-badgechip span{ font-size:12.5px; }

    .bs-catgrid{ grid-template-columns:repeat(4, 1fr); gap:20px; }
    .bs-catcard{ padding:24px 18px; }
    .bs-catcard h4{ font-size:15.5px; }

    .bs-listgrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
    .bs-listing{ margin-bottom:0; padding:16px; }

    .bs-servicegrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
    .bs-service{ margin-bottom:0; }

    .bs-articlegrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
    .bs-article{ border-bottom:1px solid var(--line); }

    .bs-contactgrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:0; }
    .bs-contactcard{ margin-bottom:0; }

    .bs-hours{ max-width:100%; padding:22px 28px; }
    .bs-form{ max-width:640px; }

    .bs-bottomnav{ padding:14px 24px calc(14px + env(safe-area-inset-bottom)); }
    .bs-navbtn svg{ width:23px; height:23px; }
    .bs-navbtn span{ font-size:12px; }
  }

  /* ============ FULLY-RESPONSIVE HARDENING ============ */
  #bs-app img, #bs-app video{ max-width:100%; height:auto; }
  #bs-app *, #bs-app *::before, #bs-app *::after{ box-sizing:border-box; }

  @media(max-width:359px){
    .bs-headline{ font-size:19px; }
    .bs-sub{ font-size:12.5px; }
    .bs-pagehead{ font-size:24px; }
    .bs-pagesub{ font-size:12.5px; }
    .bs-catgrid{ gap:10px; }
    .bs-catcard{ padding:14px 10px; }
    .bs-catcard h4{ font-size:13px; }
    .bs-badgerow{ gap:8px; }
    .bs-badgechip{ padding:12px 8px; }
    .bs-badgechip span{ font-size:10.5px; }
    .bs-quickcard-single{ padding:12px; }
    .bs-cta-main{ padding:14px 16px; gap:12px; }
    .bs-cta-main-icon{ width:42px; height:42px; }
    .bs-pcard{ flex:0 0 132px; }
  }

  /* ---- Desktop: constrain clip sizes and article hero ---- */
  @media(min-width:768px){
    /* Home teaser row (not .bs-reviewgrid-full): keep it a horizontal scroller on
       desktop too, same as mobile. A 4-col grid here made the trailing "คลิปถัดไป"
       card wrap onto its own orphaned row instead of scrolling into view. */
    .bs-reviewgrid{
      display:flex; gap:16px; overflow-x:auto; overflow-y:hidden;
      margin:0; padding:0 0 6px; scrollbar-width:none;
      scroll-snap-type:x proximity;
    }
    .bs-reviewgrid::-webkit-scrollbar{ display:none; }
    .bs-reviewgrid .bs-reviewcard{ flex:0 0 230px; scroll-snap-align:start; }
    .bs-reviewmedia{ padding-top:130%; }
    /* The full /clip library page still shows every clip as a wrapping grid. */
    .bs-reviewgrid.bs-reviewgrid-full{
      display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
      overflow:visible; margin:0 0 8px; padding:0; scroll-snap-type:none;
    }
    .bs-reviewgrid.bs-reviewgrid-full .bs-reviewcard{ flex:unset; scroll-snap-align:none; }

    .bs-article-hero-img{ max-width:640px; height:auto; margin:0 auto; display:block; border-radius:0 0 16px 16px; }
  }

  @media(min-width:641px){
    .bs-article-hero-img{ max-width:640px; height:auto; margin:0 auto; }
  }

  @media(orientation:landscape) and (max-height:420px){
    .bs-header{ padding-top:16px; padding-bottom:36px; }
    .bs-quickcard{ top:-20px; }
  }


  /* ---- home: section heads with icon, featured 2-col cards, view-all button ---- */
  .bs-sh2{ align-items:center; }
  .bs-sh2-title{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#5D432C; min-width:0; }
  .bs-sh2-ico{ display:inline-flex; color:#5D432C; flex:0 0 auto; }
  .bs-sh2 h2{ font-size:19px; line-height:1.3; margin:0; color:#5D432C; }
  .bs-sectionhead.bs-sh2 .bs-viewall{ color:#5D432C; font-weight:500; font-size:12.5px; gap:6px; white-space:nowrap; }
  .bs-sectionhead.bs-sh2 .bs-viewall::after{ content:none; }
  /* home headings: WordPress injects an empty <p> between icon and title, which doubled the gap; hide it, set an even gap, and centre the bag heading on its icon */
  #screen-home .bs-sh2-title > p{ display:none; }
  #screen-home .bs-sh2-title{ gap:12px; }
  #screen-home .bs-sh2-title[href*="/products"] h2{ position:relative; top:2px; }
  .bs-hfeat{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; align-items:stretch; }
  .bs-hcard{
    display:flex; gap:8px; align-items:flex-start; cursor:pointer;
    background:#FBF8F3; border-radius:14px; padding:6px;
    box-shadow:0 3px 12px -4px rgba(42,36,33,0.16);
    min-width:0;
  }
  .bs-hcard-media{
    position:relative; flex:0 0 42%; align-self:flex-start; aspect-ratio:1/1;
    border-radius:11px; overflow:hidden; background:var(--taupe);
  }
  .bs-hcard-media svg{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:34px; height:34px; color:var(--ink-300); }
  .bs-hcard-body{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-start; gap:3px; padding:2px 0; }
  .bs-hcard-brand{ font-size:10.5px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:#5D432C; line-height:1.2; overflow-wrap:anywhere; }
  .bs-hcard-name{ font-size:10.5px; color:#5D432C; line-height:1.25; overflow-wrap:anywhere; }
  .bs-hcard-cond{ align-self:flex-start; font-size:9.5px; color:#5D432C; background:rgba(93,67,44,0.10); border-radius:6px; padding:1px 6px; margin:0; line-height:1.3; }
  .bs-hcard-code{ font-size:9.5px; color:#5D432C; line-height:1.25; }
  .bs-hcard-codeval{ white-space:nowrap; word-break:keep-all; overflow-wrap:normal; }
  .bs-hcard-price{ font-size:13px; font-weight:700; color:#5D432C; margin-top:0; line-height:1.2; }
  .bs-allbtn{
    display:flex; align-items:center; justify-content:center; gap:22px;
    width:max-content; min-width:56%; margin:10px auto 4px; padding:10px 26px;
    border:1.5px solid #5D432C; border-radius:999px;
    color:#5D432C; font-size:14px; font-weight:500; text-decoration:none; background:transparent;
  }
  @media(min-width:520px){
    .bs-hfeat{ gap:10px; }
    .bs-hcard{ gap:12px; padding:8px; border-radius:16px; }
    .bs-hcard-media{ flex-basis:44%; }
    .bs-hcard-brand{ font-size:13px; }
    .bs-hcard-name{ font-size:12.5px; }
    .bs-hcard-cond, .bs-hcard-code{ font-size:11px; }
    .bs-hcard-price{ font-size:16px; }
    .bs-sh2 h2{ font-size:22px; }
  }


  /* ============ DESKTOP: 1000px centered column, cream background ============ */
  @media(min-width:1001px){
    html, body{ background:#F3ECE1 !important; }
    #bs-app{ background:#F3ECE1; }
    .bs-frame{ max-width:1000px; margin:0 auto; box-shadow:0 0 60px rgba(93,67,44,0.10); }
    .bs-dock{ max-width:1000px; margin:0 auto; }
    .bs-linefab{ right:calc((100vw - 1000px) / 2 + 16px); }
  }
  @media(min-width:900px){
    /* home featured products: 4 columns, vertical cards */
    .bs-hfeat{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
    .bs-hcard{ flex-direction:column; gap:8px; padding:8px; align-items:stretch; }
    .bs-hcard-media{ flex:0 0 auto; width:100%; }
    .bs-hcard-brand{ font-size:12px; }
    .bs-hcard-name{ font-size:12px; }
    .bs-hcard-cond, .bs-hcard-code{ font-size:10.5px; }
    .bs-hcard-price{ font-size:15px; }
    /* other pages: same grid rhythm inside the 1000px column */
    .bs-catgrid{ grid-template-columns:repeat(4,1fr); gap:16px; }
    .bs-listgrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .bs-listing{ margin-bottom:0; }
    .bs-servicegrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .bs-service{ margin-bottom:0; }
    .bs-articlegrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
    .bs-contactgrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:0; }
    .bs-contactcard{ margin-bottom:0; }
  }


  /* ---- home: "why choose us" block ---- */
  .bs-why{ margin-top:22px; background:#F4ECE1; border-radius:10px; padding:16px 2px 14px; text-align:center; color:#5D432C; }
  .bs-why-title{ font-family:var(--font-display); font-weight:600; font-size:clamp(14px,4.4vw,17px); line-height:1.3; color:#5D432C; }
  /* NOTE: '#bs-app p{margin:0}' (specificity 1,0,1) beats a plain class rule, so this margin
     never applied — the subtitle sat flush against the icon row. #bs-app + !important wins. */
  #bs-app .bs-why-sub{ font-size:11px; line-height:1.4; margin:0 8px 16px !important; color:#5D432C; opacity:0.85; }
  .bs-why-grid{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start !important; grid-auto-rows:auto !important; }
  .bs-why .bs-why-grid .bs-why-item{ display:flex !important; flex-direction:column !important; justify-content:flex-start !important; align-items:center !important; gap:6px !important; height:auto !important; min-height:0 !important; text-align:center; padding:2px 0 !important; margin:0 !important; border-left:1px solid rgba(93,67,44,0.22); align-self:start !important; }
  /* belt-and-braces: never let a stray <br>/<p> (wpautop) add height inside this block */
  .bs-why-grid br, .bs-why-item br, .bs-why-txt br, .bs-why-ico br{ display:none !important; }
  .bs-why-grid p, .bs-why-item p{ margin:0 !important; padding:0 !important; }
  .bs-why-grid p:empty, .bs-why-item p:empty{ display:none !important; }
  .bs-why .bs-why-grid .bs-why-item:first-child{ border-left:none; }
  .bs-why .bs-why-grid .bs-why-ico{ display:flex !important; flex:0 0 auto !important; margin:0 !important; position:static !important; top:auto !important; transform:none !important; width:34px; height:34px; border-radius:50%; border:1px solid rgba(93,67,44,0.28); background:rgba(255,255,255,0.55); align-items:center; justify-content:center; color:#5D432C; }
  .bs-why-ico svg{ width:18px; height:18px; display:block !important; margin:0 !important; }
  .bs-why .bs-why-grid .bs-why-txt{ display:block !important; flex:0 0 auto !important; align-self:stretch !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; font-size:clamp(7.4px,2.15vw,11px); line-height:1.35 !important; color:#5D432C; }
  .bs-why-txt > span{ display:block !important; margin:0 !important; padding:0 !important; white-space:nowrap; line-height:1.35 !important; }
  @media(min-width:520px){
    .bs-why{ padding:20px 16px 18px; }
    .bs-why-title{ font-size:20px; }
    #bs-app .bs-why-sub{ font-size:13px; margin-bottom:20px !important; }
    .bs-why .bs-why-grid .bs-why-ico{ width:42px; height:42px; }
    .bs-why-ico svg{ width:22px; height:22px; }
    .bs-why-txt{ font-size:12px; }
  }





  /* ---- copyright line at the bottom of every page ---- */
  .bs-copyright{ text-align:center; font-size:12px; line-height:1.6; color:var(--ink-500); padding:28px 20px 8px; font-family:inherit; }

  /* ---- no send-photo bar on pages other than home: less bottom room needed ---- */
  .bs-frame.bs-nosend{ padding-bottom:96px; }

  /* ---- /products on phones: 2-column cards (image on top). Desktop/tablet rows untouched. ---- */
  @media(max-width:519px){
    #screen-products .bs-listgrid{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:stretch; }
    #screen-products .bs-listgrid > .bs-listing{ display:flex; flex-direction:column; align-items:stretch; gap:8px; margin:0 !important; padding:8px; min-width:0; }
    #screen-products .bs-listing-media{ width:100%; height:auto; aspect-ratio:1/1; border-radius:10px; flex:0 0 auto; background-size:cover; background-position:center; }
    #screen-products .bs-listing-body{ flex:1 1 auto; min-width:0; padding:0 2px; }
    #screen-products .bs-listing-brand{ font-size:9px; }
    #screen-products .bs-listing-name{ font-size:12.5px; line-height:1.4; margin:2px 0 6px; }
    #screen-products .bs-listing-tags{ gap:4px; }
    #screen-products .bs-listing-price{ text-align:left; flex-shrink:0; padding:0 2px 2px; display:flex; align-items:baseline; gap:4px; margin-top:auto; }
    #screen-products .bs-listing-price strong{ font-size:14px; display:inline; }
    #screen-products .bs-listing-price span{ font-size:10px; }
  }


  /* ============ ONE FONT FOR EVERY CHARACTER, ON EVERY PAGE ============
     The WordPress theme (Extendable) sets its own font (Inter) on the header, the
     page-list nav, the skip link and the site title, the form controls / SVG labels
     fell back to Arial, and the pop-up checkbox label used Inter. Force the shop's
     font onto every element, its ::before/::after and placeholders. The extra :not(#x)
     lifts specificity above the theme's own !important font-family classes.
     Icon fonts (dashicons / Font Awesome / eicons) are skipped so their icons keep working. */
  html body :not(#bs-font-x):not(.dashicons):not([class*="dashicons-"]):not([class^="fa-"]):not([class*=" fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.eicon):not([class*="eicon-"]):not(#wpadminbar),
  html body :not(#bs-font-x):not(.dashicons):not([class*="dashicons-"]):not([class^="fa-"]):not([class*=" fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.eicon):not([class*="eicon-"]):not(#wpadminbar)::before,
  html body :not(#bs-font-x):not(.dashicons):not([class*="dashicons-"]):not([class^="fa-"]):not([class*=" fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.eicon):not([class*="eicon-"]):not(#wpadminbar)::after,
  html body input::placeholder, html body textarea::placeholder{
    font-family:'IBM Plex Sans Thai', sans-serif !important;
  }

  /* ============ THAI LINE BREAKING ============
     .bs-tw wraps shop words the browser's dictionary would otherwise cut in the middle
     ("แบ|รนด์เนม"). Neutralise every inherited style so the wrapper is invisible. */
  .bs-tw, #bs-app .bs-tw{
    display:inline !important; white-space:nowrap !important; margin:0 !important; padding:0 !important;
    border:0 !important; background:none !important; font:inherit !important; color:inherit !important;
    letter-spacing:inherit !important; text-transform:inherit !important; position:static !important;
    width:auto !important; height:auto !important; min-height:0 !important; opacity:inherit !important;
    transform:none !important; box-shadow:none !important; line-height:inherit !important; text-decoration:inherit !important;
  }
  /* .bs-tp = the ONE wrapper around a whole Thai text run (keeps it a single flex item, so a button's
     "gap" can no longer open holes between the words). Invisible, and it may wrap (only .bs-tw may not). */
  .bs-tp, #bs-app .bs-tp{
    display:inline !important; margin:0 !important; padding:0 !important; border:0 !important; background:none !important;
    font:inherit !important; color:inherit !important; letter-spacing:inherit !important; text-transform:inherit !important;
    position:static !important; width:auto !important; height:auto !important; min-height:0 !important; opacity:inherit !important;
    transform:none !important; box-shadow:none !important; line-height:inherit !important; text-decoration:inherit !important;
  }
  /* Home headline (h1) under the hero banner: small, soft, centred, same width as the trust card below */
  #bs-app .bs-home-h1{
    position:relative; z-index:3; box-sizing:border-box; max-width:920px; width:92%; margin:12px auto 10px !important; padding:0 6px !important;
    text-align:center; font-family:var(--font-display); font-weight:500 !important; font-size:clamp(13px, 3.5vw, 16px) !important;
    line-height:1.55 !important; letter-spacing:0.01em; color:#7A6E62 !important; text-wrap:balance;
  }
  @media (min-width:900px){ #bs-app .bs-home-h1{ margin:16px auto 12px !important; font-size:17px !important; } }
  .bs-allbtn svg, .bs-link-gold svg, .bs-viewall svg{ flex-shrink:0; }
  #bs-app{ line-break:strict; word-break:normal; overflow-wrap:break-word; }
  /* short headings / titles: even lines instead of one long line + a stranded word */
  @supports (text-wrap:balance){
    #bs-app h1, #bs-app h2, #bs-app h3, #bs-app h4, #bs-app .bs-pagehead, #bs-app .bs-pagesub,
    #bs-app .bs-hcard-name, #bs-app .bs-listing-name, #bs-app .bs-cta h3, #bs-app .bs-why-title, #bs-app .bs-why-sub{ text-wrap:balance; }
  }
  /* paragraphs: avoid a single word left alone on the last line */
  @supports (text-wrap:pretty){
    #bs-app p, #bs-app li{ text-wrap:pretty; }
  }

  @media print{
    .bs-dock, .bs-bottomnav, .bs-sendbar, #bs-banner-overlay{ display:none !important; }
  }

  /* ============ HIDE THEME/PLUGIN AUTO-INJECTED ELEMENTS ============ */
  /* Many themes auto-add post navigation, related posts, share buttons,
     or author boxes to every page. These are not part of the app and can
     show up as empty link cards. Hide them wherever #bs-app is present. */
  body:has(#bs-app) .post-navigation,
  body:has(#bs-app) .nav-links,
  body:has(#bs-app) .page-links,
  body:has(#bs-app) nav.navigation,
  body:has(#bs-app) .entry-footer,
  body:has(#bs-app) .entry-meta,
  body:has(#bs-app) .author-bio,
  body:has(#bs-app) .author-box,
  body:has(#bs-app) .related-posts,
  body:has(#bs-app) .jp-relatedposts,
  body:has(#bs-app) .sharedaddy,
  body:has(#bs-app) .share-buttons,
  body:has(#bs-app) .post-tags,
  body:has(#bs-app) .comments-area,
  body:has(#bs-app) header.site-header,
  body:has(#bs-app) #masthead,
  body:has(#bs-app) .site-header,
  body:has(#bs-app) .main-header,
  body:has(#bs-app) #header,
  body:has(#bs-app) .header-main,
  body:has(#bs-app) nav.main-navigation,
  body:has(#bs-app) .woocommerce-store-notice,
  body:has(#bs-app) .storefront-primary-navigation{
    display:none !important;
  }
  body:has(#bs-app) header:not(#bs-app header){
    display:none !important;
  }
  body:has(#bs-app){
    margin-top:0 !important;
    padding-top:0 !important;
  }
  body:has(#bs-app) #page,
  body:has(#bs-app) #content,
  body:has(#bs-app) .site-content,
  body:has(#bs-app) main{
    margin-top:0 !important;
    padding-top:0 !important;
  }

  /* Hide theme footer (site title/name bar + social icon row) that shows
     below the app content, e.g. "Brandname Supergirl" text with
     Instagram/Facebook/X icons injected by the theme's footer widget. */
  body:has(#bs-app) footer:not(#bs-app footer),
  body:has(#bs-app) .site-footer,
  body:has(#bs-app) #colophon,
  body:has(#bs-app) .footer-widgets,
  body:has(#bs-app) .footer-social,
  body:has(#bs-app) .social-icons,
  body:has(#bs-app) .social-links,
  body:has(#bs-app) .widget_social{
    display:none !important;
  }

  /* ============ FIX: WordPress wpautop injects stray <br>/<p> into
     shortcode output, breaking the flex layout of the product modal
     (pushes the image down, creating a white gap under the buttons).
     Force those injected tags to take up zero space. ============ */
  #bs-app #bs-product-modal > div > br,
  #bs-app #bs-reels > div > br{
    display:none !important;
    content:none !important;
  }
  #bs-app #bs-product-modal > div > p:empty,
  #bs-app #bs-reels > div > p:empty{
    display:none !important;
    margin:0 !important;
    height:0 !important;
  }

/* =====================================================================
   INTERACTION POLISH (v1.2.6) — one shared hover / press / reveal system.
   Only transform + opacity + box-shadow are animated (GPU, no layout work),
   hover styles are limited to real mouse devices, and everything is switched
   off for people who ask their device to reduce motion.
   ===================================================================== */
#bs-app .bs-hcard, #bs-app .bs-listing, #bs-app .bs-article, #bs-app .bs-svc,
#bs-app .bs-reviewcard, #bs-app .bs-fx-banner{
  transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease;
  -webkit-tap-highlight-color:transparent;
}
#bs-app .bs-hcard-media, #bs-app .bs-listing-media, #bs-app .bs-reviewmedia{
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease;
}
#bs-app .bs-article-img, #bs-app .bs-svc-img, #bs-app .bs-fx-banner img{
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
#bs-app .bs-playbtn{ transition:transform .2s ease, background-color .2s ease, color .2s ease; }
#bs-app .bs-fx-banner{ border-radius:16px; overflow:hidden; box-shadow:none; }
#bs-app .bs-fx-banner img{ border-radius:0 !important; }

/* Press (finger down / mouse down) — small cards shrink a bit more than wide ones */
#bs-app .bs-hcard:active, #bs-app .bs-listing:active, #bs-app .bs-reviewcard:active{ transform:scale(.97); transition-delay:.06s; }
#bs-app .bs-article:active, #bs-app .bs-svc:active{ transform:scale(.985); transition-delay:.06s; }
#bs-app .bs-fx-banner:active{ transform:scale(.965); transition-duration:.12s; }
#bs-app .bs-reviewcard:active .bs-playbtn{ transform:translate(-50%,-50%) scale(.92); }

/* Hover (mouse only) */
@media (hover:hover) and (pointer:fine){
  #bs-app .bs-hcard:hover, #bs-app .bs-listing:hover, #bs-app .bs-article:hover,
  #bs-app .bs-svc:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 32px -14px rgba(42,36,33,.42), 0 0 0 1px rgba(184,147,92,.35);
  }
  #bs-app .bs-hcard:hover:active, #bs-app .bs-listing:hover:active{ transform:translateY(-1px) scale(.97); }
  #bs-app .bs-article:hover:active, #bs-app .bs-svc:hover:active{ transform:translateY(-1px) scale(.985); }
  /* Banners: gold ring + soft gold glow (no dark drop-shadow), a clearer lift, a bit more zoom */
  #bs-app .bs-fx-banner:hover{ transform:translateY(-4px); box-shadow:0 0 0 1px rgba(184,147,92,.75), 0 12px 26px -12px rgba(184,147,92,.6); }
  #bs-app .bs-fx-banner:hover:active{ transform:translateY(-1px) scale(.965); }
  /* photos zoom inside their frame */
  #bs-app .bs-article:hover .bs-article-img, #bs-app .bs-svc:hover .bs-svc-img,
  #bs-app .bs-fx-banner:hover img{ transform:scale(1.05); }
  /* product / video photos are CSS backgrounds, so the frame itself grows a touch */
  #bs-app .bs-hcard:hover .bs-hcard-media, #bs-app .bs-listing:hover .bs-listing-media,
  #bs-app .bs-reviewcard:hover .bs-reviewmedia{ transform:scale(1.03); }
  #bs-app .bs-reviewcard:hover .bs-reviewmedia{ box-shadow:0 14px 28px -14px rgba(42,36,33,.45), 0 0 0 1px rgba(184,147,92,.4); }
  /* Play button: +10% and lighter */
  #bs-app .bs-reviewcard:hover .bs-playbtn, #bs-app .bs-playbtn:hover{
    transform:translate(-50%,-50%) scale(1.1); background:rgba(255,255,255,.92); color:#5D432C;
  }
}

/* Scroll reveal — content is visible by default; JS only hides things that are
   still below the fold, then fades them in as they approach the screen. */
.bs-rv-pre{ opacity:0; transform:translateY(18px); }
.bs-rv-in{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1) !important; }
.bs-rv-now{ transition:none !important; }

@media (prefers-reduced-motion:reduce){
  #bs-app *{ transition:none !important; }
  .bs-rv-pre{ opacity:1; transform:none; }
}

/* ---- What Brand slider (admin-managed, 2+ images) ---- */
#bs-app .bs-wb-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; border-radius:16px; }
#bs-app .bs-wb-track::-webkit-scrollbar{ display:none; }
#bs-app .bs-wb-slide img{ width:100%; display:block; }
#bs-app .bs-wb-dots{ position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:5px; z-index:2; pointer-events:none; line-height:0; }
#bs-app .bs-wb-dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.55); transition:background .2s ease, transform .2s ease; }
#bs-app .bs-wb-dot.active{ background:#fff; transform:scale(1.25); }
#bs-app .bs-fx-nopress:active, #bs-app .bs-fx-nopress:hover:active{ transform:none; }

/* Thai glyphs (tall tone marks) sit visually high in the line box, so this heading's text is nudged
   down 4px to line up with its icon — the same idea as the "สินค้าแนะนำ" heading's 2px nudge. */
#bs-app .bs-wb-head .bs-sh2-title h2{ position:relative; top:4px; }

/* =====================================================================
   PRODUCT CARD "B1" — shared by home, /products and brand/category/search listings.
   Square photo on top; brand (letter-spaced, gold rule) + product code on one line;
   2-line name; price + condition. No card box: the photo is the card.
   Every text line truncates (ellipsis / 2-line clamp) so a long brand, name or
   condition can never push the card wider than its column.
   ===================================================================== */
#bs-app .bs-hcard.bs-pc, #bs-app .bs-listing.bs-pc{
  display:block; background:none; box-shadow:none; border-radius:0; padding:0; margin:0 !important;
  min-width:0; color:#5D432C; text-decoration:none; cursor:pointer; align-items:initial; gap:0;
}
#bs-app .bs-pc-media{
  position:relative; display:block; width:100%; aspect-ratio:1/1; border-radius:14px; overflow:hidden;
  background-color:var(--taupe); background-size:cover; background-position:center;
}
#bs-app .bs-pc-media svg{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:38px; color:var(--ink-300); }
#bs-app .bs-pc-badge{
  position:absolute; top:8px; left:8px; z-index:1; background:#1FAA59; color:#fff;
  font-size:10.5px; font-weight:600; line-height:1; padding:6px 11px; box-shadow:0 4px 10px -5px rgba(20,120,60,.7); border-radius:999px; letter-spacing:.02em;
}
#bs-app .bs-pc-brand{ display:flex; align-items:center; gap:6px; margin:10px 2px 3px; min-width:0; white-space:nowrap; }
#bs-app .bs-pc-b{
  flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#5D432C; line-height:1.3;
}
#bs-app .bs-pc-line{ flex:1 1 6px; min-width:0; height:1px; background:linear-gradient(90deg,#C9A566,transparent); }
#bs-app .bs-pc-code{ flex:0 0 auto; font-size:9.5px; letter-spacing:.03em; color:#A79A88; line-height:1.3; }
#bs-app .bs-pc-name{
  margin:0 2px; font-size:13px; line-height:1.35; color:#3C2B1B; min-height:2.7em;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; overflow-wrap:anywhere;
}
#bs-app .bs-pc-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:6px 2px 0; min-width:0; }
#bs-app .bs-pc-price{ flex:0 0 auto; font-size:16px; font-weight:700; color:#5D432C; line-height:1.2; white-space:nowrap; }
#bs-app .bs-pc-price.bs-pc-ask{ font-size:12.5px; font-weight:600; }
#bs-app .bs-pc-cond{ flex:0 1 auto; min-width:0; display:flex; align-items:center; gap:4px; font-size:10.5px; color:#6B8E5A; white-space:nowrap; line-height:1.2; }
#bs-app .bs-pc-cond::before{ content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:#6B8E5A; }
#bs-app .bs-pc-cond > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }

/* grids that hold these cards */
#bs-app .bs-hfeat{ gap:16px 12px; }
#bs-app #screen-products .bs-listgrid{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }
@media(min-width:520px){
  #bs-app .bs-hfeat{ gap:22px 14px; }
  #bs-app #screen-products .bs-listgrid{ gap:22px 14px; }
}
@media(min-width:900px){
  #bs-app .bs-hfeat{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; } /* home shows 4 cards = 2 rows of 2 at every width */
  #bs-app #screen-products .bs-listgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 16px; }
  #bs-app .bs-pc-b{ font-size:11px; }
  #bs-app .bs-pc-code{ font-size:10px; }
  #bs-app .bs-pc-name{ font-size:14px; }
  #bs-app .bs-pc-price{ font-size:18px; }
  #bs-app .bs-pc-cond{ font-size:11px; }
}

/* motion: the PHOTO lifts (no box around the card) */
#bs-app .bs-pc-media{ transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease; }
#bs-app .bs-pc:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){
  #bs-app .bs-pc:hover{ transform:none; box-shadow:none; }
  #bs-app .bs-pc:hover .bs-pc-media{ transform:translateY(-3px); box-shadow:0 0 0 1px rgba(184,147,92,.7), 0 14px 26px -14px rgba(184,147,92,.65); }
  #bs-app .bs-pc:hover:active{ transform:scale(.97); }
}

/* Product cards are real links to the product page (no popup) */
a.bs-pc, a.bs-pc:hover, a.bs-pc:visited{ text-decoration:none; color:inherit; display:block; -webkit-tap-highlight-color:transparent; }

/* whole card is clickable via an empty stretched link (block wrapper keeps WordPress from wrapping cards in <p>) */
#bs-app .bs-pc{ position:relative; }
#bs-app .bs-pc-hit{ position:absolute; inset:0; z-index:2; border-radius:14px; text-decoration:none; -webkit-tap-highlight-color:transparent; }

/* card grids: 2 columns on phones, 4 from 768px (iPad portrait and up) so home matches the products page.
   Very narrow screens (flip-phone cover display) get 1 column so cards stay readable. */
@media(min-width:768px) and (max-width:899px){
  #bs-app .bs-hfeat{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px 14px; }
  #bs-app #screen-products .bs-listgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px 14px; }
}
@media(min-width:900px){
  #bs-app .bs-hfeat{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 16px; }
}
@media(max-width:299px){
  #bs-app #screen-products .bs-listgrid{ grid-template-columns:minmax(0,1fr); }
}

/* HOME product row: phones = one swipeable row (2 cards + a slice of the 3rd as a hint); 768px+ = 4 x 2 grid */
@media(max-width:767px){
  #bs-app .bs-hfeat{
    display:flex; grid-template-columns:none; gap:12px; overflow-x:auto; overflow-y:hidden;
    margin:0 -20px; padding:0 20px 8px; scroll-snap-type:x mandatory; scroll-padding-left:20px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  }
  #bs-app .bs-hfeat::-webkit-scrollbar{ display:none; }
  #bs-app .bs-hfeat > .bs-hcard{ flex:0 0 calc((100% - 12px) / 2.2); scroll-snap-align:start; min-width:0; }
}
@media(min-width:768px){
  #bs-app .bs-hfeat{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:visible; margin:0; padding:0; scroll-snap-type:none; }
  #bs-app .bs-hfeat > .bs-hcard{ flex:none; }
}
@media(max-width:299px){ #bs-app .bs-hfeat{ display:flex; grid-template-columns:none; } }

/* "พร้อมส่ง" badge: green button, white text (every listing / fallback card) */
#bs-app .bs-listing-badge{ background:#1FAA59; color:#fff; box-shadow:0 4px 10px -5px rgba(20,120,60,.7); }
/* tapped product card: instant feedback while the next page loads */
#bs-app .bs-pc.is-going .bs-pc-media, #bs-app .bs-pc.is-pressing .bs-pc-media{ transform:scale(.965); opacity:.88; transition:transform .12s ease, opacity .12s ease; }