/* =========================================================
   RESET
========================================================= */
.container{margin:auto;padding:0 15px}
.flex-between{display:flex;align-items:center;}
/* =========================================================
   HEADER WRAPPER
========================================================= */
.site-header{background:linear-gradient(
      180deg,rgba(7,16,34,0.97) 0%,rgba(10,22,48,0.98) 100%
    );backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(0,0,0,0.35)}
/* =========================================================
   TOP BAR
========================================================= */
.top-bar{background:linear-gradient(
      90deg,#081224 0%,#0d1d3a 100%
    );color:#d7e3ff;font-size:13px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.05)}
.top-left{display:flex;align-items:center;gap:8px}
.top-left .text{opacity:0.75}
.top-bar .hotline{background:linear-gradient(
      135deg,#ffb300,#ff8f00
    );color:#081224;padding:4px 10px;border-radius:30px;font-weight:700;box-shadow:0 0 12px rgba(255,179,0,0.35)}
.top-right{display:flex;gap:18px;flex:1;justify-content:flex-end}
.top-right span{opacity:0.9;transition:0.25s}
.top-right span:hover{color:#fff}
/* =========================================================
   MAIN HEADER
========================================================= */
.main-header{position:relative;padding:16px 0;/*border-bottom:1px solid rgba(255,255,255,0.05);*/}
.main-header::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:linear-gradient(
      90deg,transparent,rgba(255,179,0,0.45),transparent
    )}
/* =========================================================
   LOGO
========================================================= */
.logo{flex:0 0 auto}
.logo img{height:48px;display:block}
/* =========================================================
   MAKITA BADGE
========================================================= */
.makita-badge{display:flex;flex-direction:column;align-items:center;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),0 4px 18px rgba(0,0,0,0.2)}
.badge-text{font-size:11px;font-weight:700;color:#ffb300;margin-bottom:4px;letter-spacing:0.4px}
.makita-badge img{height:32px}
/* =========================================================
   SEARCH BOX
========================================================= */
.search-box{display:flex;flex:1;max-width:560px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:16px;overflow:hidden;backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),0 4px 18px rgba(0,0,0,0.22);transition:0.3s}
.search-box:hover{border-color:rgba(255,179,0,0.25);box-shadow:0 0 18px rgba(255,179,0,0.12)}
.search-box input{flex:1;padding:12px 16px;border:none;background:transparent;color:#fff;font-size:14px;outline:none}
.search-box input::placeholder{color:rgba(255,255,255,0.45)}
.search-box button{width:54px;border:none;cursor:pointer;background:linear-gradient(
      135deg,#ffb300,#ff8f00
    );color:#081224;font-weight:700;transition:0.25s}
.search-box button:hover{filter:brightness(1.05)}
/* =========================================================
   HEADER ACTIONS
========================================================= */
.header-actions{display:flex;gap:10px}
.header-actions .item{position:relative;min-width:74px;padding:10px 8px;border-radius:16px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.06);backdrop-filter:blur(8px);color:#fff;text-align:center;cursor:pointer;transition:0.25s}
.header-actions .item:hover{transform:translateY(-2px);background:rgba(255,179,0,0.1);border-color:rgba(255,179,0,0.25);box-shadow:0 10px 22px rgba(0,0,0,0.3)}
.header-actions .item a{color:#fff;text-decoration:none}
.header-actions .item span{display:block;font-size:12px;padding-top:6px}
/* =========================================================
   CART
========================================================= */
.cart{position:relative}
.cart-count{position:absolute;top:2px;right:5px;background:linear-gradient(
      135deg,#ffb300,#ff8f00
    );color:#081224;font-size:10px;font-weight:700;padding:3px 6px;border-radius:30px;box-shadow:0 0 10px rgba(255,179,0,0.4)}
/* =========================================================
   BUTTON EFFECT
========================================================= */
button,.header-actions .item{transition:transform 0.12s ease,opacity 0.12s ease}
button:active,.header-actions .item:active{transform:scale(0.94);opacity:0.7}
/* =========================================================
   RIPPLE EFFECT
========================================================= */
.ripple-btn{position:relative;overflow:hidden}
.ripple{position:absolute;width:20px;height:20px;background:rgba(255,255,255,0.4);border-radius:50%;transform:scale(0);animation:ripple 0.5s linear;pointer-events:none}
@keyframes ripple{to{transform:scale(10);opacity:0}}
/* =========================================================
   DESKTOP LARGE
========================================================= */
@media (min-width:1201px){.search-box{max-width:620px}}
/* =========================================================
   TABLET
========================================================= */
@media (max-width:1023px){.makita-badge{display:none}.main-header .container{gap:10px}.logo img{height:36px}.search-box{min-width:0}.header-actions{gap:8px}.header-actions .item{min-width:62px;padding:8px 6px}.header-actions .item span{font-size:11px}}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width:767px){.top-right{display:none}.top-bar{padding:6px 0}.top-left{font-size:12px;margin:0 auto}.main-header{padding:10px 0}.main-header .container{gap:8px;padding:0}.logo img{height:28px}.search-box{height:38px;border-radius:12px}.search-box input{padding:0 12px;font-size:13px}.search-box button{width:42px}.header-actions{gap:6px}.header-actions .item{min-width:auto;padding:8px;border-radius:12px}.header-actions .item span{padding-top:0!important}.header-actions .item:not(:first-child){display:none}.cart-count{top:0;right:7px}}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width:540px){.logo img{height:24px}.search-box{height:34px}.search-box input{font-size:12px}.header-actions .item span{display:none}.search-box button{width:38px}.header-actions .item{padding:7px}}