/*
Theme Name: SFBL Hubohu A-Z Custom
Author: Yellow Host
Description: SFBL reference-based responsive WordPress theme with extensive Customizer controls. Use your own or authorized assets.
Version: 2.9.0
License: GPL-2.0-or-later
Text Domain: sfbl-hubohu
*/
:root{
 --sf-green:#61bd4a;--sf-green-dark:#48a63d;--sf-green-deep:#13834c;--sf-light:#dfffcf;
 --sf-wrap:1068px;--sf-side:240px;--sf-gap:30px;--sf-radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Arial,Helvetica,sans-serif;color:#111;background:#fff;overflow-x:hidden}
a{color:#175ba5;text-decoration:none}a:hover{text-decoration:underline}
.sf-bg{position:fixed;inset:0;z-index:-2;background:#fff url('assets/sfbl-reference-background.png') center top/cover no-repeat}
.sf-bg-overlay{position:fixed;inset:0;z-index:-1;pointer-events:none;background:transparent}

.sf-page{min-height:100vh}
.sf-container{width:var(--sf-wrap);max-width:calc(100% - 24px);margin:0 auto}
.sf-header{height:112px;display:flex;align-items:flex-start;justify-content:space-between;padding:8px 24px 0}
.sf-left-logo{min-width:0}
.sf-left-logo img{display:block;max-width:370px;max-height:100px;width:auto;height:auto;object-fit:contain}
.sf-logo-text{font-size:42px;font-weight:800;line-height:1;color:#13834c;padding-top:8px}
.sf-logo-text small{display:block;font-size:27px;font-style:italic;color:#76ad5d;margin-top:8px}
.sf-right-logo{width:86px;height:98px;object-fit:contain}
.sf-grid-logo{width:74px;height:74px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.sf-grid-logo i{background:#42b958}.sf-grid-label{text-align:center;color:#e21d2b;font-size:14px;font-weight:800}
.sf-nav{min-height:41px;background:linear-gradient(#76cb5d,#58b747);border-radius:10px;display:flex;align-items:stretch;overflow:visible;box-shadow:0 2px 4px rgba(0,0,0,.15);position:relative;z-index:20;margin-bottom:8px}
.sf-nav>ul,.sf-nav>div{display:flex;align-items:stretch;width:100%;margin:0;padding:0;list-style:none}
.sf-nav li{position:relative;flex:1;list-style:none}
.sf-nav a{min-height:41px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;border-right:3px solid rgba(38,126,49,.55);white-space:nowrap;padding:0 10px}
.sf-nav li:last-child>a{border-right:0}.sf-nav a:hover{background:#4ea83f;text-decoration:none}
.sf-nav .sub-menu{position:absolute;top:100%;left:0;min-width:205px;background:#fff;border:1px solid #ddd;border-top:3px solid var(--sf-green);display:none;padding:0;margin:0;box-shadow:0 5px 14px rgba(0,0,0,.2);z-index:100}
.sf-nav li:hover>.sub-menu,.sf-nav li:focus-within>.sub-menu{display:block}
.sf-nav .sub-menu li{display:block;width:100%;flex:none}
.sf-nav .sub-menu a{color:#222;justify-content:flex-start;background:#fff;border:0;border-bottom:1px solid #eee;min-height:35px;font-size:12px}
.sf-nav .sub-menu a:hover{background:#effbe9;color:#16814e}
.sf-main{display:grid;grid-template-columns:var(--sf-side) minmax(0,1fr);gap:var(--sf-gap);align-items:start}
.sf-sidebar{min-width:0}
.sf-box{background:#fff;border:1px solid #d4d4d4;border-radius:7px;overflow:hidden;margin-bottom:9px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.sf-box-title{height:44px;background:var(--sf-green);display:flex;align-items:center;padding:0 12px;font-size:14px;font-weight:700}
.sf-box-title:before{content:"▼";width:20px;height:20px;border-radius:50%;background:#fff;color:#5bbb49;display:flex;align-items:center;justify-content:center;font-size:10px;margin-right:9px}
.sf-box-body{padding:8px}
.sf-video{background:#080808;border:6px solid #ddd;height:184px;position:relative;display:flex;align-items:center;justify-content:center}
.sf-play{width:42px;height:31px;border-radius:50%;background:#e7252b;position:relative}.sf-play:after{content:"";position:absolute;left:16px;top:8px;border-left:12px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.sf-video-label{position:absolute;bottom:12px;left:0;right:0;color:#fff;text-align:center;font-size:8px}
.sf-fb-item{display:grid;grid-template-columns:50px minmax(0,1fr);gap:7px;padding:8px 3px;border-bottom:1px solid #ddd;min-height:67px}
.sf-fb-item:last-child{border-bottom:0}.sf-fb-img{width:50px;height:50px;border:1px solid #222;object-fit:cover;background:#eee}
.sf-fb-name{display:block;font-size:16px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-follow{display:inline-block;margin-top:3px;border:1px solid #d0d0d0;background:#f6f6f6;color:#333;font-size:11px;padding:2px 5px}
.sf-follow-count{font-size:11px;margin-left:4px;white-space:nowrap}
.sf-socials{display:flex;gap:4px;flex-wrap:wrap;padding:2px}
.sf-social{width:59px;height:59px;border-radius:6px;background:#1877f2;color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none}
.sf-social svg{width:32px;height:32px;fill:currentColor}.sf-social:nth-child(2){background:#0a66c2}.sf-social:nth-child(3){background:#ff0000}.sf-social:nth-child(4){background:#111}.sf-social:nth-child(5){background:#25d366}.sf-social:nth-child(6){background:#010101}.sf-social:nth-child(7){background:#000}
.sf-hero-wrap{background:var(--sf-green);padding:13px;border-radius:15px;box-shadow:0 2px 5px rgba(0,0,0,.2)}
.sf-hero{position:relative;background:#fff;border-radius:11px;overflow:hidden}
.sf-slides{position:relative;overflow:hidden;background:#fff}
.sf-slide{position:absolute;inset:0;width:100%;opacity:0;visibility:hidden;line-height:0;background:#fff;transition:opacity .65s ease-in-out;z-index:1}
.sf-slide.active{opacity:1;visibility:visible;z-index:2}
.sf-slide:first-child{position:relative}
.sf-slide img{display:block;width:100%;height:auto !important;max-width:100%;object-fit:contain}
.sf-slide-link{display:block;width:100%;height:auto;line-height:0}
.sf-slide-link{display:block;line-height:0}
.sf-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:40px;height:52px;border:0;border-radius:50%;background:rgba(213,222,226,.8);color:#fff;font-size:34px;cursor:pointer}
.sf-prev{left:0}.sf-next{right:0}
.sf-dots{position:absolute;left:26px;bottom:15px;display:flex;gap:9px;z-index:5}
.sf-dot{width:19px;height:19px;border-radius:50%;border:3px solid #fff;background:#58bd4e;box-shadow:0 0 0 1px #4ea947;cursor:pointer;padding:0}
.sf-dot.active{background:#ff8c1c}
.sf-products{margin-top:9px;background:#fff;border:1px solid #ddd;border-radius:12px;padding:8px 7px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.14)}
.sf-product-track{display:flex;gap:7px;width:max-content;animation:sfMove 28s linear infinite}
.sf-products:hover .sf-product-track{animation-play-state:paused}
.sf-product{width:118px;height:170px;flex:0 0 118px;border:1px solid #ddd;border-radius:6px;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.14);display:flex;flex-direction:column;align-items:center;justify-content:center}
.sf-product img{width:105px;height:128px;object-fit:contain}.sf-product-name{font-size:11px;font-weight:600;color:#222;margin-top:3px;text-align:center}
@keyframes sfMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sf-brands{display:grid;grid-template-columns:repeat(4,1fr);gap:15px 25px;padding:14px 12px 12px}
.sf-brand{text-align:center;min-width:0}.sf-brand-logo{width:100%;height:68px;object-fit:contain;display:block}.sf-brand-name{display:inline-block;background:#fff;border-radius:18px;padding:6px 17px;box-shadow:0 5px 10px rgba(0,0,0,.15);font-size:13px;font-weight:700;color:#111;margin-top:4px}
.sf-footer{height:42px;background:var(--sf-green);border-radius:10px;margin:10px 0 12px;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;font-size:12px;font-weight:600}.sf-footer a{color:#fff;text-decoration:underline}
.sf-mobile-menu{display:none}
.sf-logo-text{font-size:23px}.sf-logo-text small{font-size:15px}.sf-right-logo{width:56px;height:64px}
 .sf-nav li{flex:1 0 50%}.sf-nav a{font-size:10px}.sf-footer{font-size:10px}
}

@media(min-width:851px){.sf-header{padding-left:24px;padding-right:24px}.sf-main{grid-template-columns:240px minmax(0,1fr);gap:30px}.sf-hero-wrap{padding:13px}.sf-products{margin-top:9px}.sf-brands{padding-top:14px}}

/* v2.7 visual calibration against supplied SFBL mobile screenshot */
.sf-container{width:1068px;max-width:calc(100% - 10px)}
.sf-header{height:112px;padding:7px 20px 0}
.sf-left-logo{padding-top:2px}
.sf-logo-text{font-size:48px;letter-spacing:-1.2px;color:#13834c;line-height:.95}
.sf-logo-text small{font-size:25px;letter-spacing:-.5px;margin-top:7px;color:#7eae68}
.sf-right-logo{width:82px;height:94px}
.sf-nav{height:41px;min-height:41px;margin-bottom:8px;border-radius:9px}
.sf-nav>ul,.sf-nav>div{height:41px}
.sf-nav a{min-height:41px;font-size:11px;padding:0 6px;border-right:3px solid rgba(38,126,49,.55)}
.sf-main{grid-template-columns:200px minmax(0,1fr);gap:20px}
.sf-box{margin-bottom:9px;border-radius:4px}
.sf-box-title{height:38px;padding:0 9px;font-size:11px}
.sf-box-title:before{width:16px;height:16px;font-size:8px;margin-right:6px}
.sf-box-body{padding:6px}
.sf-video{height:176px;border-width:5px}
.sf-fb-item{grid-template-columns:44px minmax(0,1fr);gap:6px;padding:6px 2px;min-height:61px}
.sf-fb-img{width:44px;height:44px}
.sf-fb-name{font-size:12px;line-height:15px}
.sf-follow{font-size:9px;padding:1px 4px}
.sf-follow-count{font-size:9px;margin-left:3px}
.sf-socials{gap:5px;justify-content:flex-start;padding:2px 1px 3px}
.sf-social{width:53px;height:53px;border-radius:5px}
.sf-social svg{width:31px;height:31px}
.sf-hero-wrap{padding:11px;border-radius:13px}
.sf-dots{left:27px;bottom:13px;gap:7px}
.sf-dot{width:18px;height:18px}
.sf-products{margin-top:9px;padding:7px 6px;border-radius:9px}
.sf-product-track{gap:6px}
.sf-product{width:178px;flex-basis:178px;height:210px;border-radius:5px}
.sf-product img{width:158px;height:164px}
.sf-product-name{font-size:10px}
.sf-brands{grid-template-columns:repeat(4,1fr);gap:14px 22px;padding:13px 8px 11px}
.sf-brand-logo{height:74px}
.sf-brand-name{font-size:11px;padding:5px 14px;margin-top:2px}
.sf-footer{height:40px;margin:8px 0 10px;border-radius:8px;font-size:10px}
@media(max-width:850px){
 .sf-container{max-width:calc(100% - 10px)}
 .sf-header{height:auto;min-height:86px}
 .sf-main{grid-template-columns:1fr;gap:9px}
 .sf-product{width:140px;flex-basis:140px;height:180px}
 .sf-product img{width:125px;height:140px}
}

/* v2.8 — Mobile Reference Mode
   The supplied mobile reference shows the classic fixed-width SFBL canvas
   scaled to the phone screen. Keep the desktop geometry on mobile. */
@media(max-width:1100px){
  html,body{min-width:1068px}
  .sf-container{width:1068px;max-width:none;margin:0 auto}
  .sf-header{height:112px}
  .sf-nav{height:41px;min-height:41px}
  .sf-nav>ul,.sf-nav>div{height:41px;flex-wrap:nowrap}
  .sf-nav li{flex:1}
  .sf-nav a{min-height:41px}
  .sf-main{grid-template-columns:200px minmax(0,1fr);gap:20px}
  .sf-sidebar{order:initial}
  .sf-content{order:initial}
  .sf-brands{grid-template-columns:repeat(4,1fr)}
  .sf-product{width:178px;flex-basis:178px;height:210px}
  .sf-product img{width:158px;height:164px}
}

/* v2.9 — exact header/footer visual reference from the user's supplied screenshot */
.sf-reference-header{
  height:112px !important;
  padding:0 !important;
  margin:0 !important;
  background-image:url('assets/header-reference.png');
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% 100%;
  display:block !important;
  position:relative;
}
.sf-reference-header > *{display:none !important}
.sf-reference-footer{
  height:44px !important;
  margin:8px 0 12px !important;
  padding:0 !important;
  border-radius:9px !important;
  background-image:url('assets/footer-reference.png') !important;
  background-repeat:no-repeat !important;
  background-position:center top !important;
  background-size:100% 100% !important;
  position:relative;
  display:block !important;
  box-shadow:none !important;
}
.sf-footer-hotlinks{position:absolute;inset:0;display:flex;align-items:stretch;justify-content:center}
.sf-footer-hotlinks a{display:block;height:100%;width:100px;color:transparent;text-decoration:none}
.sf-footer-hotlinks a:hover{background:transparent}
@media(max-width:1100px){
  .sf-reference-header{width:1068px;height:112px !important}
  .sf-reference-footer{width:1068px;height:44px !important}
}