/* === Control Center 8.6.8 - Mobile optimization + WhatsApp icon fix === */
:root{
  --cc-wa:#25D366;
  --cc-wa-dark:#149b46;
}

.mobile-dock .dock-icon-svg,
.mobile-dock .dock-wa svg{
  width:20px;
  height:20px;
  fill:currentColor;
  display:block;
  flex:0 0 auto;
}
.mobile-dock .dock-item{
  gap:6px!important;
}
.mobile-dock .dock-item small{
  line-height:1!important;
}
.mobile-dock .dock-wa{
  background:linear-gradient(180deg, rgba(37,211,102,.16), rgba(20,155,70,.24))!important;
  border-color:rgba(37,211,102,.34)!important;
  color:#eafff2!important;
  box-shadow:0 8px 22px rgba(37,211,102,.18);
}
.mobile-dock .dock-wa:hover,
.mobile-dock .dock-wa:active{
  background:linear-gradient(180deg, rgba(37,211,102,.22), rgba(20,155,70,.30))!important;
}

@media (max-width: 860px){
  body{
    padding-bottom:90px!important;
  }
  .float-wa{display:none!important;}
  .container{width:min(100% - 18px,1480px)!important;}
  .topbar{height:64px!important;padding:0 10px!important;}
  .topbar-inner{height:64px!important;gap:10px!important;}
  .brand-logo{min-width:124px!important;height:56px!important;}
  .brand-logo img{height:44px!important;max-width:148px!important;}
  .top-actions{gap:8px!important;}
  .cart-chip{height:38px!important;min-width:54px!important;padding:0 10px!important;}

  .hero{margin-top:10px!important;border-radius:22px!important;}
  .hero-grid{padding:18px 14px!important;gap:16px!important;}
  .logo-panel,.logo-panel-final{min-height:182px!important;border-radius:20px!important;}
  .logo-panel img,.logo-panel-final img{max-height:170px!important;width:min(96%,270px)!important;}
  .hero h1{font-size:clamp(28px,8.2vw,40px)!important;line-height:1.02!important;}
  .hero p{font-size:14px!important;line-height:1.42!important;margin-top:10px!important;}
  .hero-clean-actions{gap:10px!important;}
  .hero-clean-actions .primary-cta,
  .hero-clean-actions .secondary-cta{min-height:50px!important;border-radius:16px!important;}
  .trust-row{margin-top:12px!important;gap:8px!important;justify-content:flex-start!important;}
  .trust-row span{padding:8px 11px!important;font-size:12px!important;}

  .cc78-benefits.container{margin-top:8px!important;margin-bottom:14px!important;gap:8px!important;}
  .cc78-benefits article{min-height:auto!important;padding:10px!important;border-radius:18px!important;}
  .cc78-benefits span{width:34px!important;height:34px!important;font-size:15px!important;}
  .cc78-benefits strong{font-size:12px!important;}
  .cc78-benefits small{font-size:11px!important;line-height:1.25!important;}

  .service-cards{gap:8px!important;margin-top:0!important;}
  .service-cards article{padding:11px!important;border-radius:18px!important;}
  .service-cards small{font-size:11px!important;}
  .showcase,.combo-offers,.catalog,.cc78-intent,.footer{margin-top:12px!important;}
  .showcase,.combo-offers{padding:12px!important;border-radius:22px!important;}
  .combo-head h2,.showcase-head h2{font-size:17px!important;}
  .combo-head a,.showcase-head span{font-size:12px!important;}

  .tools{gap:8px!important;padding:10px!important;border-radius:18px!important;top:72px!important;}
  .tools input,.tools select{height:42px!important;font-size:14px!important;}
  .quick-filter-bar{gap:8px!important;padding-bottom:2px!important;}
  .quick-filter-bar button{min-height:36px!important;padding:0 12px!important;font-size:12px!important;}

  /* One-column list layout on phones to avoid clipping */
  .grid{grid-template-columns:1fr!important;gap:12px!important;}
  .grid .card{
    display:grid!important;
    grid-template-columns:118px minmax(0,1fr)!important;
    gap:0!important;
    align-items:stretch!important;
    border-radius:22px!important;
    overflow:hidden!important;
  }
  .grid .card .thumb{
    height:auto!important;
    min-height:118px!important;
    margin:10px!important;
    border-radius:18px!important;
  }
  .grid .card .thumb img{padding:10px!important;}
  .grid .card .info{
    padding:10px 12px 10px 0!important;
    display:flex!important;
    flex-direction:column!important;
    min-width:0!important;
  }
  .grid .card .title-box{
    min-height:unset!important;
    padding:9px!important;
    border-radius:14px!important;
  }
  .grid .card .title{
    -webkit-line-clamp:3!important;
    font-size:13px!important;
    line-height:1.22!important;
  }
  .grid .card .badges{margin:8px 0 7px!important;gap:6px!important;}
  .grid .card .badge{font-size:10px!important;padding:6px 7px!important;}
  .grid .card .price-row{margin-top:auto!important;align-items:flex-end!important;}
  .grid .card .price{font-size:18px!important;line-height:1!important;}
  .grid .card .stock{font-size:11px!important;text-align:right!important;}
  .grid .card .add-btn{height:38px!important;margin-top:10px!important;border-radius:12px!important;font-size:13px!important;}

  .mobile-dock{
    padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px))!important;
    gap:8px!important;
    height:auto!important;
  }
  .dock-item{
    min-height:58px!important;
    border-radius:18px!important;
    padding:8px 4px!important;
  }

  /* Keep the AI button from covering products */
  #ccAiWidget .cc-ai-button,
  .cc-ai-button{
    right:12px!important;
    bottom:96px!important;
  }
  #ccAiWidget .cc-ai-panel,
  .cc-ai-panel{
    right:10px!important;
    bottom:154px!important;
    width:min(92vw,360px)!important;
    max-height:60vh!important;
  }
}

@media (max-width: 520px){
  .hero-grid{padding:16px 12px!important;}
  .hero h1{font-size:30px!important;}
  .hero p{font-size:13px!important;}
  .cc78-benefits{grid-template-columns:1fr 1fr!important;}
  .cc78-benefits small{font-size:10px!important;}
  .service-cards{grid-template-columns:1fr 1fr!important;}
  .showcase-head{padding:4px 6px 10px!important;}
  .combo-grid{grid-template-columns:1fr!important;}
}