/* =====================================================================
   hipremium-2026.css — Redesign 2026 global skin (header / nav / footer)
   Loaded LAST after all legacy CSS. All selectors are hp26-prefixed so
   nothing here can collide with Bootstrap 3 / style.css on unported pages.
   Design tokens sampled from the Hi Premium logo (blue #0078B8, gray #B0B0B0).
   ===================================================================== */

:root{
  --hp-ink:#111418;
  --hp-slate:#5B6573;
  --hp-hairline:#E1E7ED;
  --hp-mist:#F1F5F8;
  --hp-paper:#F8FAFC;
  --hp-blue:#0078B8;
  --hp-blue-deep:#005A8C;
  --hp-blue-soft:#E7F1F8;
  --hp-gray:#B0B0B0;
  --hp-line-green:#06C755;
  --hp-f-display:"Fraunces","Sarabun",serif;
  --hp-f-display-th:"Sarabun","Fraunces",sans-serif;
  --hp-f-body:"Inter","Sarabun",system-ui,sans-serif;
  --hp-f-body-th:"Sarabun","Inter",system-ui,sans-serif;
  --hp-s1:4px;--hp-s2:8px;--hp-s3:12px;--hp-s4:16px;--hp-s5:24px;
  --hp-s6:32px;--hp-s7:48px;--hp-s8:64px;--hp-s9:96px;
  --hp-radius:8px;--hp-radius-lg:16px;
  --hp-maxw:1200px;
}

/* ---------- shared primitives (hp26 scope only) ---------- */
.hp26-wrap{max-width:var(--hp-maxw);margin:0 auto;padding-left:24px;padding-right:24px;
  width:100%;box-sizing:border-box}
@media(max-width:640px){
  .hp26-wrap{padding-left:20px !important;padding-right:20px !important}
}

.hp26-btn{display:inline-flex;align-items:center;gap:var(--hp-s2);height:48px;padding:0 var(--hp-s5);
  border-radius:var(--hp-radius);font-family:var(--hp-f-body-th);font-weight:600;font-size:15px;
  border:1px solid transparent;transition:all .15s;white-space:nowrap;text-decoration:none;cursor:pointer;line-height:1}
.hp26-btn .hp26-arrow{transition:transform .2s}
.hp26-btn:hover .hp26-arrow{transform:translateX(3px)}
.hp26-btn-primary{background:var(--hp-blue);color:#fff !important}
.hp26-btn-primary:hover,.hp26-btn-primary:focus{background:var(--hp-blue-deep);color:#fff !important;text-decoration:none}
.hp26-btn-secondary{background:transparent;color:var(--hp-ink) !important;border-color:var(--hp-ink)}
.hp26-btn-secondary:hover{background:var(--hp-ink);color:#fff !important;text-decoration:none}
.hp26-btn-line{background:var(--hp-line-green);color:#fff !important}
.hp26-btn-line:hover{background:#04a546;color:#fff !important;text-decoration:none}
.hp26-btn-ghost{background:transparent;color:var(--hp-ink) !important}
.hp26-btn-ghost:hover{background:var(--hp-mist);text-decoration:none}
.hp26-btn-sm{height:36px;font-size:13px;padding:0 var(--hp-s4)}

.hp26-chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 var(--hp-s4);border-radius:999px;
  background:#fff;border:1px solid var(--hp-hairline);font-size:13px;font-weight:500;color:var(--hp-ink);
  cursor:pointer;transition:all .15s;font-family:var(--hp-f-body-th);text-decoration:none;line-height:1}
.hp26-chip:hover{background:var(--hp-ink);color:#fff;border-color:var(--hp-ink);text-decoration:none}
.hp26-chip.active{background:var(--hp-blue);color:#fff;border-color:var(--hp-blue)}

.hp26-eyebrow{font-family:var(--hp-f-body);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--hp-blue);font-weight:600}
.hp26-hsec{font-family:var(--hp-f-display-th);font-weight:700;font-size:clamp(26px,3.5vw,38px);line-height:1.15;
  letter-spacing:-.015em;margin:0 0 var(--hp-s3);color:var(--hp-ink)}
.hp26-hsec em{font-family:var(--hp-f-display);font-style:italic;font-weight:500;color:var(--hp-blue)}
.hp26-hsec .hp26-en{display:block;font-family:var(--hp-f-display);font-weight:400;font-style:italic;
  font-size:.5em;color:var(--hp-slate);margin-top:var(--hp-s2);letter-spacing:0}
.hp26-seclead{color:var(--hp-slate);font-size:16px;max-width:60ch;margin:0 0 var(--hp-s5);font-family:var(--hp-f-body-th)}
.hp26-section{padding:var(--hp-s8) 0;font-family:var(--hp-f-body-th)}
@media(max-width:640px){.hp26-section{padding:var(--hp-s7) 0}}
.hp26-sechead{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--hp-s5);
  margin-bottom:var(--hp-s6);flex-wrap:wrap}
.hp26-sechead .hp26-right{display:flex;gap:var(--hp-s3);align-items:center;flex-wrap:wrap}

/* =====================================================================
   UTILITY BAR
   ===================================================================== */
.hp26-utility{background:var(--hp-ink);color:rgba(255,255,255,.85);font-size:12px;
  font-family:var(--hp-f-body);letter-spacing:.04em}
.hp26-utility .hp26-wrap{display:flex;justify-content:space-between;align-items:center;min-height:36px;gap:var(--hp-s4)}
.hp26-utility .hp26-uleft,.hp26-utility .hp26-uright{display:flex;gap:var(--hp-s5);align-items:center;flex-wrap:wrap}
.hp26-utility a{color:rgba(255,255,255,.85) !important;text-decoration:none}
.hp26-utility a:hover{color:#fff !important}
.hp26-utility .hp26-pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;
  background:rgba(255,255,255,.1);border-radius:99px;font-size:11px}
.hp26-utility .hp26-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hp-line-green)}
@media(max-width:640px){.hp26-utility{display:none}}

/* =====================================================================
   HEADER
   ===================================================================== */
.hp26-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hp-hairline);min-height:72px;display:flex;align-items:center;
  font-family:var(--hp-f-body-th)}
.hp26-header-inner{display:flex;align-items:center;gap:var(--hp-s5);width:100%}
.hp26-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none}
.hp26-logo img{max-height:46px;width:auto;display:block}
.hp26-logoname{display:flex;flex-direction:column;line-height:1;font-family:var(--hp-f-display)}
.hp26-logoname b{font-weight:700;font-size:20px;color:var(--hp-ink);letter-spacing:-.02em}
.hp26-logoname small{font-family:var(--hp-f-body);font-size:9px;color:var(--hp-gray);letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin-top:3px}
@media(max-width:480px){.hp26-logoname small{display:none}.hp26-logoname b{font-size:17px}}
.hp26-search{flex:1;max-width:440px;display:flex;align-items:center;height:42px;background:var(--hp-mist);
  border:1px solid transparent;border-radius:var(--hp-radius);padding:0 var(--hp-s2) 0 var(--hp-s4);gap:var(--hp-s2);transition:all .15s}
.hp26-search:hover,.hp26-search:focus-within{border-color:var(--hp-blue);background:#fff}
.hp26-search input[type="text"]{flex:1;border:0 !important;background:transparent !important;outline:none;
  font-family:var(--hp-f-body-th);font-size:14px;color:var(--hp-ink);height:38px;margin:0;padding:0;box-shadow:none}
.hp26-search input[type="text"]::placeholder{color:var(--hp-slate)}
.hp26-search button{flex-shrink:0;width:34px;height:34px;border:0;border-radius:6px;background:var(--hp-blue);
  color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:14px;padding:0}
.hp26-search button:hover{background:var(--hp-blue-deep)}
.hp26-hcta{display:flex;align-items:center;gap:var(--hp-s3);margin-left:auto;flex-shrink:0}
.hp26-hphone{display:flex;flex-direction:column;align-items:flex-end;font-family:var(--hp-f-body);
  font-size:10px;color:var(--hp-slate);letter-spacing:.08em;line-height:1.2;text-decoration:none}
.hp26-hphone b{color:var(--hp-ink);font-family:var(--hp-f-display-th);font-weight:700;font-size:15px;letter-spacing:0}
.hp26-linebtn{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 var(--hp-s4);
  background:var(--hp-line-green);color:#fff !important;border-radius:var(--hp-radius);font-weight:600;
  font-size:14px;transition:all .15s;text-decoration:none;line-height:1}
.hp26-linebtn:hover{background:#04a546;color:#fff !important;text-decoration:none}
.hp26-welcome{font-size:12px;color:var(--hp-slate);white-space:nowrap}
.hp26-menubtn{display:none;width:42px;height:42px;align-items:center;justify-content:center;
  border-radius:var(--hp-radius);background:var(--hp-mist);border:0;cursor:pointer;padding:0}
.hp26-menubtn:hover{background:var(--hp-hairline)}
.hp26-menubtn svg{width:22px;height:22px;color:var(--hp-ink)}
@media(max-width:900px){
  .hp26-menubtn{display:inline-flex}
  .hp26-search{display:none}
  .hp26-welcome{display:none}
  .hp26-hphone{display:none}
  .hp26-linebtn span{display:none}
  .hp26-linebtn{width:42px;padding:0;justify-content:center}
}

/* =====================================================================
   MAIN NAV + MEGA PANELS
   ===================================================================== */
.hp26-mainnav{background:#fff;border-bottom:1px solid var(--hp-hairline);position:relative;z-index:900;
  font-family:var(--hp-f-body-th)}
.hp26-mainnav .hp26-wrap{display:flex;align-items:center;gap:var(--hp-s1);min-height:48px;flex-wrap:wrap}
.hp26-navitem{position:relative}
.hp26-navitem > a{display:inline-flex;align-items:center;gap:6px;height:48px;padding:0 var(--hp-s4);
  font-weight:500;font-size:14px;color:var(--hp-ink) !important;transition:all .15s;
  border-bottom:2px solid transparent;text-decoration:none;line-height:1}
.hp26-navitem > a:hover{color:var(--hp-blue) !important;border-bottom-color:var(--hp-blue);text-decoration:none}
.hp26-navitem.hp26-hasmega > a::after{content:"▾";font-size:9px;color:var(--hp-slate);margin-left:2px}
.hp26-mega{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--hp-hairline);border-top:0;
  border-radius:0 0 var(--hp-radius-lg) var(--hp-radius-lg);box-shadow:0 24px 50px -12px rgba(0,0,0,.14);
  padding:var(--hp-s5) var(--hp-s6);min-width:620px;max-width:900px;display:none;z-index:950;
  max-height:70vh;overflow-y:auto}
.hp26-navitem.hp26-hasmega:hover .hp26-mega,
.hp26-navitem.hp26-hasmega:focus-within .hp26-mega{display:block}
.hp26-navitem:last-child .hp26-mega,.hp26-mega.hp26-mega-right{left:auto;right:0}
.hp26-megacols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--hp-s4) var(--hp-s5)}
.hp26-megacol h4{margin:0 0 var(--hp-s2);font-family:var(--hp-f-body-th);font-size:13px;font-weight:700;color:var(--hp-ink)}
.hp26-megacol h4 a{color:var(--hp-ink) !important;text-decoration:none}
.hp26-megacol h4 a:hover{color:var(--hp-blue) !important}
.hp26-megacol ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.hp26-megacol ul a{font-size:13px;color:var(--hp-slate) !important;font-weight:400;text-decoration:none;line-height:1.45;display:block}
.hp26-megacol ul a:hover{color:var(--hp-blue) !important;text-decoration:none}
.hp26-megatile{margin-top:var(--hp-s4);padding-top:var(--hp-s4);border-top:1px solid var(--hp-hairline);
  display:flex;gap:var(--hp-s4);align-items:center;flex-wrap:wrap}
.hp26-megatile a{display:block}
.hp26-megatile img{max-height:120px;width:auto;border-radius:var(--hp-radius);display:block}
.hp26-navcart{margin-left:auto}
.hp26-navcart > a{font-weight:600}
.hp26-cartcount{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 5px;border-radius:99px;background:var(--hp-blue);color:#fff;font-size:11px;font-weight:700;
  font-family:var(--hp-f-body)}
@media(max-width:900px){.hp26-mainnav{display:none}}

/* =====================================================================
   MOBILE DRAWER
   ===================================================================== */
.hp26-drawer{display:none;position:fixed;inset:0;background:#fff;z-index:2000;overflow-y:auto;
  padding:var(--hp-s5);font-family:var(--hp-f-body-th);-webkit-overflow-scrolling:touch}
.hp26-drawer.open{display:block}
.hp26-drawer-close{position:absolute;top:var(--hp-s4);right:var(--hp-s4);width:42px;height:42px;border-radius:50%;
  background:var(--hp-mist);display:flex;align-items:center;justify-content:center;font-size:24px;border:0;
  cursor:pointer;color:var(--hp-ink);line-height:1}
.hp26-drawer .hp26-dlogo img{max-height:40px;width:auto;margin-bottom:var(--hp-s4)}
.hp26-dsearch{display:flex;align-items:center;height:44px;background:var(--hp-mist);border-radius:var(--hp-radius);
  padding:0 var(--hp-s2) 0 var(--hp-s4);gap:var(--hp-s2);margin-bottom:var(--hp-s4)}
.hp26-dsearch input[type="text"]{flex:1;border:0 !important;background:transparent !important;outline:none;
  font-family:var(--hp-f-body-th);font-size:15px;color:var(--hp-ink);height:40px;margin:0;padding:0;box-shadow:none}
.hp26-dsearch button{flex-shrink:0;width:36px;height:36px;border:0;border-radius:6px;background:var(--hp-blue);
  color:#fff;cursor:pointer;font-size:14px;padding:0}
.hp26-drawer ul.hp26-dlist{list-style:none;padding:0;margin:0 0 var(--hp-s5)}
.hp26-drawer ul.hp26-dlist > li{border-bottom:1px solid var(--hp-hairline)}
.hp26-drawer ul.hp26-dlist > li > a{display:flex;align-items:center;justify-content:space-between;
  padding:var(--hp-s4) 0;font-size:16px;color:var(--hp-ink) !important;font-weight:600;text-decoration:none}
.hp26-drawer ul.hp26-dlist > li > a:hover{color:var(--hp-blue) !important;text-decoration:none}
.hp26-dsub{list-style:none;padding:0 0 var(--hp-s3) var(--hp-s4);margin:0;display:none}
.hp26-dsub li a{display:block;padding:7px 0;font-size:14px;color:var(--hp-slate) !important;text-decoration:none}
.hp26-dsub li a:hover{color:var(--hp-blue) !important}
li.hp26-dopen > .hp26-dsub{display:block}
.hp26-dtoggle{float:right;font-size:18px;color:var(--hp-slate)}
.hp26-dcta{display:flex;flex-direction:column;gap:var(--hp-s2);margin-top:var(--hp-s5)}
.hp26-dcta .hp26-btn{justify-content:center}
.hp26-dlinks{display:flex;flex-wrap:wrap;gap:var(--hp-s2) var(--hp-s4);margin-top:var(--hp-s5);
  padding-top:var(--hp-s4);border-top:1px solid var(--hp-hairline);font-size:13px}
.hp26-dlinks a{color:var(--hp-slate) !important;text-decoration:none}

/* =====================================================================
   PRE-FOOTER CTA STRIP
   ===================================================================== */
.hp26-ctastrip{background:var(--hp-blue);color:#fff;position:relative;overflow:hidden;font-family:var(--hp-f-body-th)}
.hp26-ctastrip::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 90% 50%,var(--hp-blue-deep) 0%,transparent 60%)}
.hp26-ctastrip .hp26-ctainner{display:flex;align-items:center;justify-content:space-between;gap:var(--hp-s6);
  padding:var(--hp-s7) 0;flex-wrap:wrap;position:relative;z-index:1}
.hp26-ctastrip h3{font-family:var(--hp-f-display-th);font-weight:700;font-size:clamp(24px,3.2vw,34px);
  line-height:1.18;margin:0 0 var(--hp-s2);max-width:26ch;color:#fff}
.hp26-ctastrip h3 em{font-family:var(--hp-f-display);font-style:italic;font-weight:500;color:#fff;
  border-bottom:3px solid #fff;padding-bottom:2px}
.hp26-ctastrip p{margin:0;font-size:15px;color:rgba(255,255,255,.85);max-width:50ch}
.hp26-ctabtns{display:flex;gap:var(--hp-s3);flex-wrap:wrap}
.hp26-ctastrip .hp26-btn-primary{background:#fff;color:var(--hp-blue-deep) !important}
.hp26-ctastrip .hp26-btn-primary:hover{background:var(--hp-ink);color:#fff !important}
.hp26-ctastrip .hp26-btn-secondary{background:transparent;color:#fff !important;border-color:#fff}
.hp26-ctastrip .hp26-btn-secondary:hover{background:#fff;color:var(--hp-blue-deep) !important}

/* =====================================================================
   FOOTER
   ===================================================================== */
.hp26-footer{background:var(--hp-ink);color:rgba(255,255,255,.7);font-family:var(--hp-f-body-th);
  font-size:14px;padding:var(--hp-s8) 0 var(--hp-s5)}
.hp26-footer a{text-decoration:none}
.hp26-ftop{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:var(--hp-s6);
  padding-bottom:var(--hp-s6);border-bottom:1px solid rgba(255,255,255,.1)}
@media(max-width:960px){.hp26-ftop{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hp26-ftop{grid-template-columns:1fr;gap:var(--hp-s5)}}
.hp26-fbrand img{max-height:44px;width:auto;margin-bottom:var(--hp-s3);background:#fff;border-radius:8px;padding:4px}
.hp26-fpitch{font-size:13px;color:rgba(255,255,255,.6);max-width:40ch;line-height:1.7;margin:0 0 var(--hp-s4)}
.hp26-fcontact{font-size:13px;color:rgba(255,255,255,.65);line-height:1.8}
.hp26-fcontact a{color:rgba(255,255,255,.85) !important}
.hp26-fcol h4{font-family:var(--hp-f-body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin:0 0 var(--hp-s4);font-weight:600}
.hp26-fcol ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--hp-s2)}
.hp26-fcol ul a{color:rgba(255,255,255,.75) !important;font-size:14px}
.hp26-fcol ul a:hover{color:#fff !important}
.hp26-fnews{margin-top:var(--hp-s2)}
.hp26-fnews p{font-size:12px;color:rgba(255,255,255,.55);margin:0 0 var(--hp-s2)}
.hp26-fnews form > div{display:flex;gap:var(--hp-s2)}
.hp26-fnews input[type="text"]{flex:1;height:42px;border-radius:var(--hp-radius);
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;padding:0 var(--hp-s3);
  font-family:var(--hp-f-body-th);font-size:13px;outline:none;margin:0}
.hp26-fnews input[type="text"]::placeholder{color:rgba(255,255,255,.4)}
.hp26-fnews input[type="text"]:focus{border-color:var(--hp-blue)}
.hp26-fnews button{height:42px;padding:0 var(--hp-s4);border:0;border-radius:var(--hp-radius);
  background:var(--hp-blue);color:#fff;font-weight:600;font-size:13px;cursor:pointer;font-family:var(--hp-f-body-th)}
.hp26-fnews button:hover{background:var(--hp-blue-deep)}
.hp26-fbottom{display:flex;justify-content:space-between;align-items:center;padding-top:var(--hp-s5);
  gap:var(--hp-s4);flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.5)}
.hp26-fbadges{display:flex;gap:var(--hp-s2);align-items:center;flex-wrap:wrap}
.hp26-fbadge{padding:4px 10px;border:1px solid rgba(255,255,255,.15);border-radius:99px;font-size:11px;
  letter-spacing:.06em;font-family:var(--hp-f-body);color:rgba(255,255,255,.7)}
.hp26-fsocial{display:flex;gap:var(--hp-s2);align-items:center}
.hp26-fsocial a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.06);
  display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7) !important;
  transition:all .15s;font-size:14px}
.hp26-fsocial a:hover{background:var(--hp-blue);color:#fff !important}
.hp26-fpay{display:flex;gap:var(--hp-s2);align-items:center;flex-wrap:wrap}
.hp26-fpay img{height:24px;width:auto;border-radius:3px;opacity:.85}

/* =====================================================================
   SEARCH RESULTS (search-result.php) — 2026-06-11
   ===================================================================== */
.hp26-pagi{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:var(--hp-s6);flex-wrap:wrap}
.hp26-pagi a,.hp26-pagi span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;
  padding:0 12px;border-radius:var(--hp-radius);border:1px solid var(--hp-hairline);background:#fff;
  color:var(--hp-ink) !important;font-family:var(--hp-f-body);font-size:14px;font-weight:600;text-decoration:none}
.hp26-pagi a:hover{border-color:var(--hp-blue);color:var(--hp-blue) !important;text-decoration:none}
.hp26-pagi span.cur{background:var(--hp-blue);border-color:var(--hp-blue);color:#fff !important}
.hp26-pagi span:not(.cur){border:0;background:transparent;min-width:auto;color:var(--hp-slate) !important}
.hp26-noresult{text-align:center;padding:var(--hp-s7) var(--hp-s4);background:#fff;border:1px solid var(--hp-hairline);
  border-radius:var(--hp-radius-lg)}
.hp26-noresult .hp26-nr-ico{width:72px;height:72px;border-radius:50%;background:var(--hp-blue-soft);color:var(--hp-blue);
  display:inline-flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:var(--hp-s4)}
.hp26-noresult h3{font-family:var(--hp-f-display-th);font-weight:700;font-size:22px;margin:0 0 var(--hp-s3);color:var(--hp-ink)}
.hp26-noresult p{color:var(--hp-slate);font-size:15px;max-width:60ch;margin:0 auto var(--hp-s5);line-height:1.7}
.hp26-noresult .hp26-herochips{margin-top:0}

/* =====================================================================
   PRODUCT DETAIL (viewimg.php) — Phase 2, 2026-06-11
   ===================================================================== */
.hp26-crumbs{background:#fff;border-bottom:1px solid var(--hp-hairline);font-family:var(--hp-f-body-th)}
.hp26-crumbs .hp26-wrap{display:flex;align-items:center;gap:8px;min-height:44px;font-size:13px;
  flex-wrap:wrap;color:var(--hp-slate)}
.hp26-crumbs a{color:var(--hp-slate) !important;text-decoration:none}
.hp26-crumbs a:hover{color:var(--hp-blue) !important}
.hp26-crumbs b{color:var(--hp-ink);font-weight:600}
.hp26-pd{background:var(--hp-paper);padding:var(--hp-s6) 0;font-family:var(--hp-f-body-th)}
.hp26-pdgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--hp-s7)}
@media(max-width:900px){.hp26-pdgrid{grid-template-columns:1fr;gap:var(--hp-s5)}}
.hp26-pdmain{background:#fff;border:1px solid var(--hp-hairline);border-radius:var(--hp-radius-lg);
  overflow:hidden;position:relative}
.hp26-pdmain img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:contain;background:#fff}
.hp26-pdthumbs{display:flex;gap:var(--hp-s2);margin-top:var(--hp-s3);flex-wrap:wrap}
.hp26-pdthumbs a{width:72px;height:72px;border:1px solid var(--hp-hairline);border-radius:var(--hp-radius);
  overflow:hidden;display:block;background:#fff;flex-shrink:0}
.hp26-pdthumbs a.cur,.hp26-pdthumbs a:hover{border-color:var(--hp-blue);border-width:2px}
.hp26-pdthumbs img{width:100%;height:100%;object-fit:contain;display:block}
.hp26-pdcode{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--hp-slate);letter-spacing:.06em}
.hp26-pdtitle{font-family:var(--hp-f-display-th);font-weight:700;font-size:clamp(22px,2.6vw,32px);
  line-height:1.2;margin:4px 0 var(--hp-s2);color:var(--hp-ink)}
.hp26-pdrating{color:#f5a623;font-size:14px;margin-bottom:var(--hp-s3);min-height:16px}
.hp26-pdprice{background:#fff;border:1px solid var(--hp-hairline);border-radius:var(--hp-radius-lg);
  padding:var(--hp-s4) var(--hp-s5);margin:var(--hp-s4) 0;display:flex;align-items:baseline;gap:var(--hp-s4);flex-wrap:wrap}
.hp26-pdprice .now{font-family:var(--hp-f-display);font-weight:700;font-size:28px;color:var(--hp-blue)}
.hp26-pdprice .was{font-size:15px;color:var(--hp-slate);text-decoration:line-through}
.hp26-pdprice .note{font-size:12px;color:var(--hp-slate);flex-basis:100%}
.hp26-pdspecs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--hp-s2) var(--hp-s4);
  margin:var(--hp-s4) 0;font-size:14px}
@media(max-width:480px){.hp26-pdspecs{grid-template-columns:1fr}}
.hp26-pdspecs .spec{background:#fff;border:1px solid var(--hp-hairline);border-radius:var(--hp-radius);
  padding:var(--hp-s2) var(--hp-s3)}
.hp26-pdspecs .spec label{display:block;font-family:var(--hp-f-body);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--hp-slate);margin:0 0 2px;font-weight:600}
.hp26-pdspecs .spec .v{color:var(--hp-ink);font-weight:500;word-break:break-word}
.hp26-pdtags{display:flex;flex-wrap:wrap;gap:6px;margin:var(--hp-s3) 0}
.hp26-pdquote{background:#fff;border:2px solid var(--hp-ink);border-radius:var(--hp-radius-lg);
  padding:var(--hp-s5);margin-top:var(--hp-s4);box-shadow:0 20px 50px -20px rgba(0,90,140,.2)}
.hp26-pdquote h3{margin:0 0 var(--hp-s3);font-family:var(--hp-f-display-th);font-size:18px;font-weight:700;color:var(--hp-ink)}
.hp26-pdquote .row{display:flex;gap:var(--hp-s2);flex-wrap:wrap;margin-bottom:var(--hp-s3);align-items:center}
.hp26-pdquote input[type="email"],.hp26-pdquote input[type="number"]{flex:1;min-width:180px;height:46px;
  border:1px solid var(--hp-hairline);border-radius:var(--hp-radius);padding:0 var(--hp-s3);
  font-family:var(--hp-f-body-th);font-size:14px;outline:none;margin:0}
.hp26-pdquote input:focus{border-color:var(--hp-blue)}
.hp26-pdquote label{font-size:13px;color:var(--hp-slate);font-weight:500}
.hp26-qty{display:inline-flex;align-items:center;border:1px solid var(--hp-hairline);border-radius:var(--hp-radius);
  overflow:hidden;background:#fff}
.hp26-qty button{width:42px;height:46px;border:0;background:var(--hp-mist);cursor:pointer;font-size:14px;
  color:var(--hp-ink);padding:0}
.hp26-qty button:hover{background:var(--hp-hairline)}
.hp26-qty input{width:72px;height:46px;border:0 !important;text-align:center;font-family:var(--hp-f-body);
  font-weight:600;font-size:15px;outline:none;margin:0;background:#fff !important;box-shadow:none}
.hp26-pdquote .hp26-btn{width:100%;justify-content:center;height:52px;font-size:16px}
.hp26-pdalts{display:flex;gap:var(--hp-s2);margin-top:var(--hp-s3)}
.hp26-pdalts .hp26-btn{flex:1;justify-content:center}
.hp26-pdnav{display:flex;gap:var(--hp-s2);justify-content:flex-end;margin-bottom:var(--hp-s3)}
.hp26-pdnav a{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 var(--hp-s3);
  border:1px solid var(--hp-hairline);border-radius:var(--hp-radius);font-size:13px;color:var(--hp-slate) !important;
  background:#fff;text-decoration:none}
.hp26-pdnav a:hover{color:var(--hp-blue) !important;border-color:var(--hp-blue)}
.hp26-pdsection{padding:var(--hp-s6) 0;font-family:var(--hp-f-body-th)}
.hp26-pdsection h2.hp26-pdh{font-family:var(--hp-f-display-th);font-weight:700;font-size:22px;
  margin:0 0 var(--hp-s4);color:var(--hp-ink)}
.hp26-pddesc{background:#fff;border:1px solid var(--hp-hairline);border-radius:var(--hp-radius-lg);
  padding:var(--hp-s5);font-size:15px;line-height:1.8;color:#333;overflow-wrap:break-word}
.hp26-pddesc iframe,.hp26-pddesc video{max-width:100%}
.hp26-pdmeta details{background:#fff;border:1px solid var(--hp-hairline);border-radius:var(--hp-radius);
  padding:var(--hp-s3) var(--hp-s4);margin-bottom:var(--hp-s2)}
.hp26-pdmeta summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--hp-ink)}
.hp26-pdmeta .body{padding-top:var(--hp-s3);font-size:14px;color:var(--hp-slate);line-height:1.7}
.hp26-pdreviews .box-reviews{background:#fff;border:1px solid var(--hp-hairline);
  border-radius:var(--hp-radius-lg);padding:var(--hp-s5)}

/* =====================================================================
   BLOG ARTICLE (blog-single.php) — Phase 4, 2026-06-11
   ===================================================================== */
.hp26-article{max-width:820px;margin:0 auto}
.hp26-article-head{text-align:center;margin-bottom:var(--hp-s5)}
.hp26-article-head .hp26-bmeta{display:flex;gap:var(--hp-s3);font-size:12px;color:var(--hp-slate);
  font-family:var(--hp-f-body);margin-bottom:var(--hp-s3);flex-wrap:wrap}
.hp26-article-head h1{font-family:var(--hp-f-display-th);font-weight:700;font-size:clamp(26px,3.4vw,40px);
  line-height:1.22;letter-spacing:-.015em;margin:0;color:var(--hp-ink)}
.hp26-article-hero{border-radius:var(--hp-radius-lg);overflow:hidden;border:1px solid var(--hp-hairline);
  margin-bottom:var(--hp-s6);box-shadow:0 24px 50px -20px rgba(17,20,24,.18)}
.hp26-article-hero img{width:100%;height:auto;display:block}
.hp26-article-body{font-family:var(--hp-f-body-th);font-size:16px;line-height:1.85;color:#2a2f36;
  overflow-wrap:break-word}
.hp26-article-body p{margin:0 0 1.1em}
.hp26-article-body h2,.hp26-article-body h3,.hp26-article-body h4{font-family:var(--hp-f-display-th);
  font-weight:700;color:var(--hp-ink);line-height:1.3;margin:1.6em 0 .6em}
.hp26-article-body h2{font-size:24px}
.hp26-article-body h3{font-size:20px}
.hp26-article-body img{max-width:100%;height:auto;border-radius:var(--hp-radius);margin:12px auto;display:block}
.hp26-article-body iframe,.hp26-article-body video{max-width:100%}
.hp26-article-body table{max-width:100%;border-collapse:collapse}
.hp26-article-body td,.hp26-article-body th{border:1px solid var(--hp-hairline);padding:8px 12px}
.hp26-article-body a{color:var(--hp-blue)}
.hp26-article-body ul,.hp26-article-body ol{margin:0 0 1.1em;padding-left:1.4em}
.hp26-article-foot{max-width:820px;margin:var(--hp-s5) auto 0;padding-top:var(--hp-s4);
  border-top:1px solid var(--hp-hairline);font-family:var(--hp-f-body-th)}
.hp26-article-cta{max-width:820px;margin:var(--hp-s6) auto 0;background:var(--hp-blue-soft);
  border:1px solid #cfe3f1;border-radius:var(--hp-radius-lg);padding:var(--hp-s4) var(--hp-s5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--hp-s4);flex-wrap:wrap;
  font-family:var(--hp-f-body-th)}
.hp26-article-cta b{display:block;font-family:var(--hp-f-display-th);font-size:17px;color:var(--hp-ink)}
.hp26-article-cta span{font-size:13px;color:var(--hp-slate)}
.hp26-article-comments{max-width:820px;margin:var(--hp-s6) auto 0;font-family:var(--hp-f-body-th)}
.hp26-article-comments h3{font-family:var(--hp-f-display-th);font-weight:700;font-size:20px;
  margin:0 0 var(--hp-s3);color:var(--hp-ink)}

/* Today's Offer band (newproduct.php) — single banner image */
.hp26-offer{background:linear-gradient(160deg,var(--hp-blue-soft) 0%,#f3f8fc 70%);
  border-bottom:1px solid var(--hp-hairline)}
.hp26-offerbanner{display:block;position:relative;border-radius:var(--hp-radius-lg);overflow:hidden;
  border:1px solid var(--hp-hairline);box-shadow:0 24px 50px -20px rgba(0,90,140,.3)}
.hp26-offerbanner img{width:100%;height:auto;display:block}
.hp26-ob-base{display:block}
.hp26-ob-spot{position:absolute;display:block;border-radius:14px;transition:all .15s}
.hp26-ob-spot:hover{box-shadow:inset 0 0 0 3px var(--hp-blue);background:rgba(0,120,184,.06)}

/* Quote modal */
.hp26-qmodal{display:none;position:fixed;inset:0;background:rgba(17,20,24,.55);z-index:3000;
  align-items:center;justify-content:center;padding:20px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.hp26-qmodal.open{display:flex}
.hp26-qmodal-box{position:relative;background:#fff;border-radius:var(--hp-radius-lg);max-width:480px;width:100%;
  padding:28px;box-shadow:0 40px 90px -30px rgba(0,0,0,.5);max-height:90vh;overflow-y:auto;
  font-family:var(--hp-f-body-th)}
.hp26-qmodal-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;
  background:var(--hp-mist);border:0;cursor:pointer;font-size:20px;color:var(--hp-ink);line-height:1}
.hp26-qmodal-close:hover{background:var(--hp-hairline)}

/* 2026-06-11 bottom-right cleanup: hide legacy UItoTop button + any leftover livechat widget */
#toTop,#toTopHover{display:none !important}
[id^="phplive"],[class^="phplive"],#livechat-compact-container,#livechat-full{display:none !important}