:root { --digibay-green:#28a745; --primary-color:#007aff; --secondary-color:#0056b3; --background-color:#ffffff; --text-primary:#1d1d1f; --text-secondary:#6e6e73; --accent-color:#f5f5f7; }
body { font-family:'Manrope', sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.text-digibay-green{ color:var(--digibay-green); }
.bg-digibay-green{ background-color:var(--digibay-green); }
.border-digibay-green{ border-color:var(--digibay-green); }
.ring-digibay-green{ --tw-ring-color:var(--digibay-green); }
@media (max-width:768px){
  .mobile-filter-overlay{ position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:40; opacity:0; visibility:hidden; transition:all .3s ease; }
  .mobile-filter-overlay.active{ opacity:1; visibility:visible; }
  .mobile-filter-sidebar{ position:fixed; top:0; left:0; bottom:0; width:85%; max-width:320px; background:#fff; z-index:50; transform:translateX(-100%); transition:transform .3s ease; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .mobile-filter-sidebar.active{ transform:translateX(0); }
  .mobile-sticky-header{ position:sticky; top:0; z-index:30; background:#fff; border-bottom:1px solid #e5e7eb; }
}
.touch-target{ min-height:44px; min-width:44px; }
html{ scroll-behavior:smooth; }
@media (max-width:768px){
  .hide-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
  .hide-scrollbar::-webkit-scrollbar{ display:none; }
}
.subcategory-chip{ transition:all .2s ease; transform:scale(1); }
.subcategory-chip:active{ transform:scale(.95); }
.subcategory-chip:hover{ transform:translateY(-1px); box-shadow:0 4px 8px rgba(0,0,0,.1); }

/* Product show page helpers */
.scroll-container{ -ms-overflow-style:none; scrollbar-width:none; }
.scroll-container::-webkit-scrollbar{ display:none; }
.tab-content{ display:none; }
.tab-content.active{ display:block; }

/* Product show page animations */
@keyframes fadeIn { from{ opacity:0; } to{ opacity:1; } }
@keyframes slideUp { from{ opacity:0; transform:translateY(30px) scale(0.95);} to{ opacity:1; transform:translateY(0) scale(1);} }
@keyframes scaleIn { from{ opacity:0; transform:scale(0.3);} to{ opacity:1; transform:scale(1);} }
.animate-fadeIn{ animation: fadeIn 0.3s ease-out; }
.animate-slideUp{ animation: slideUp 0.4s ease-out; }
.animate-scaleIn{ animation: scaleIn 0.5s ease-out; }