:root{--mobile-padding:1rem;--mobile-gap:1rem;--touch-target:44px;--card-radius:16px;--filter-radius:12px;--primary-color:#2d1810;--accent-color:#f4a261;--text-dark:#374151;--text-medium:#6b7280;--bg-light:#f8f9fa;--border-color:#e5e7eb;--white:#fff;--success-color:#10b981;--warning-color:#f59e0b;--error-color:#dc2626}.browse-page{padding:var(--mobile-padding) 0;width:100%;min-height:100vh;position:relative;background:#fff!important}.browse-header{padding:var(--mobile-padding);border-radius:var(--card-radius);border:1px solid var(--border-color);flex-direction:column;gap:1rem;margin-bottom:1.5rem;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 20px #0000000f;background:#fff!important}.browse-header:before{content:"";background:linear-gradient(90deg, var(--accent-color) 0%, #f4d03f 100%);width:100%;height:4px;position:absolute;top:0;left:0}.header-content{text-align:center}.header-content h1{color:var(--primary-color);letter-spacing:-.02em;margin:0 0 .5rem;font-size:1.75rem;font-weight:700}.browse-description{color:var(--text-medium);margin:0;font-size:1rem;font-weight:400;line-height:1.6}.quick-stats{justify-content:space-around;gap:.5rem;margin-top:1rem;display:flex}.stat-item{text-align:center;border-radius:var(--filter-radius);cursor:pointer;background:linear-gradient(135deg,#f4a26114 0%,#f4d03f14 100%);border:1px solid #f4a26126;flex:1;min-width:0;padding:.875rem .5rem;transition:all .3s}.stat-item:active{background:linear-gradient(135deg,#f4a26126 0%,#f4d03f26 100%);transform:scale(.95)}.stat-number{color:var(--accent-color);margin-bottom:.25rem;font-size:1.5rem;font-weight:800;display:block}.stat-label{color:var(--text-medium);text-transform:uppercase;letter-spacing:.5px;font-size:.75rem;font-weight:600}.modern-filter-bar{z-index:100;-webkit-backdrop-filter:blur(20px);background:#fffffff2;border:1px solid #f4a2611a;border-radius:20px;margin-bottom:2rem;padding:1rem 1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);position:sticky;top:1rem;box-shadow:0 8px 32px #00000014,0 0 0 1px #f4a2610d}.modern-filter-bar:hover{box-shadow:0 12px 40px #0000001f,0 0 0 1px #f4a2611a}.filter-controls{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.filter-toggle{color:#2d1810;cursor:pointer;white-space:nowrap;background:linear-gradient(135deg,#f8f9fa 0%,#fff 100%);border:2px solid #0000;border-radius:50px;align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-size:.9rem;font-weight:600;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.filter-toggle:before{content:"";background:linear-gradient(90deg,#0000,#f4a2611a,#0000);width:100%;height:100%;transition:left .6s;position:absolute;top:0;left:-100%}.filter-toggle:hover:before{left:100%}.filter-toggle:hover{color:#2d1810;background:linear-gradient(135deg,#f4a261 0%,#f4d03f 100%);border-color:#f4a26133;transform:translateY(-2px);box-shadow:0 8px 25px #f4a2614d}.filter-toggle.active{color:#fff;background:linear-gradient(135deg,#f4a261 0%,#e76f51 100%);transform:scale(1.05);box-shadow:0 6px 20px #f4a26166}.filter-badge{color:#fff;background:linear-gradient(135deg,#e76f51 0%,#dc2626 100%);border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:.75rem;font-weight:700;animation:2s infinite bounce;display:flex;box-shadow:0 2px 8px #dc26264d}@keyframes bounce{0%,20%,53%,80%,to{transform:translate(0,0)scale(1)}40%,43%{transform:translateY(-8px)scale(1.1)}}.sort-dropdown{position:relative}.modern-select{appearance:none;color:#2d1810;cursor:pointer;background:linear-gradient(135deg,#fff 0%,#f8f9fa 100%);border:2px solid #f4a26133;border-radius:15px;min-width:180px;padding:.75rem 2.5rem .75rem 1rem;font-size:.9rem;font-weight:600;transition:all .3s;position:relative}.sort-dropdown:after{content:"⌄";color:#f4a261;pointer-events:none;font-size:1.2rem;transition:transform .3s;position:absolute;top:50%;right:1rem;transform:translateY(-50%)}.modern-select:hover{border-color:#f4a261;transform:translateY(-1px);box-shadow:0 4px 12px #f4a26126}.modern-select:focus{border-color:#f4a261;outline:none;box-shadow:0 0 0 3px #f4a2611a}.clear-filters-modern{color:#dc2626;cursor:pointer;background:linear-gradient(135deg,#fee2e2 0%,#fecaca 100%);border:2px solid #dc262633;border-radius:12px;align-items:center;gap:.5rem;padding:.75rem 1rem;font-size:.85rem;font-weight:600;transition:all .3s;display:flex}.clear-filters-modern:hover{background:linear-gradient(135deg,#fecaca 0%,#fca5a5 100%);transform:scale(1.05);box-shadow:0 4px 12px #dc262633}.results-summary{background:linear-gradient(135deg,#f4a2611a 0%,#f4d03f1a 100%);border:1px solid #f4a26133;border-radius:20px;margin-left:auto;padding:.5rem 1rem}.results-count{color:#2d1810;align-items:center;gap:.5rem;font-size:.9rem;font-weight:700;display:flex}.results-count:before{content:"🍫";font-size:1rem}.modern-filters{opacity:0;background:#fff;border:1px solid #f4a2611a;border-radius:20px;max-height:0;margin-bottom:2rem;transition:all .4s cubic-bezier(.4,0,.2,1);overflow:hidden;box-shadow:0 4px 20px #0000000d}.modern-filters.expanded{opacity:1;max-height:500px;padding:2rem;box-shadow:0 8px 32px #00000014}.filters-grid-modern{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;display:grid}.filter-card{background:linear-gradient(135deg,#fefcfc 0%,#f8f9fa 100%);border:2px solid #f4a2611a;border-radius:16px;padding:1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.filter-card:before{content:"";background:linear-gradient(90deg,#f4a261 0%,#f4d03f 100%);height:3px;transition:transform .3s;position:absolute;top:0;left:0;right:0;transform:scaleX(0)}.filter-card:hover{border-color:#f4a2614d;transform:translateY(-4px);box-shadow:0 12px 28px #f4a26126}.filter-card:hover:before{transform:scaleX(1)}.filter-label{color:#2d1810;align-items:center;gap:.75rem;margin-bottom:1rem;font-size:.95rem;font-weight:700;display:flex}.filter-label svg{color:#f4a261;flex-shrink:0}.modern-filter-select{appearance:none;color:#2d1810;cursor:pointer;background:linear-gradient(135deg,#fff 0%,#fefcfc 100%);border:2px solid #f4a26133;border-radius:12px;width:100%;padding:.875rem 1rem;font-size:.9rem;font-weight:500;transition:all .3s;position:relative}.modern-filter-select:hover{border-color:#f4a261;transform:translateY(-1px);box-shadow:0 2px 8px #f4a2611a}.modern-filter-select:focus{border-color:#f4a261;outline:none;box-shadow:0 0 0 3px #f4a2611a}.filter-card.cacao-card{background:linear-gradient(135deg,#f4a2610d 0%,#f4d03f0d 100%);grid-column:span 2}.cacao-range{align-items:center;gap:1rem;margin-top:1rem;display:flex}.cacao-input{appearance:none;text-align:center;background:#fff;border:2px solid #f4a26133;border-radius:8px;flex:1;padding:.75rem;font-size:.9rem;font-weight:500;transition:all .3s}.cacao-input:focus{border-color:#f4a261;outline:none;box-shadow:0 0 0 3px #f4a2611a}.cacao-separator{color:#f4a261;font-size:1.1rem;font-weight:700}@media (max-width:768px){.modern-filter-bar{border-radius:16px;padding:1rem;position:relative;top:0}.filter-controls{flex-direction:column;align-items:stretch;gap:.75rem}.filter-toggle,.modern-select{justify-content:center;width:100%}.results-summary{text-align:center;margin-top:.5rem;margin-left:0}.filters-grid-modern{grid-template-columns:1fr;gap:1rem}.filter-card.cacao-card{grid-column:span 1}.cacao-range{flex-direction:column;gap:.75rem}}@media (max-width:480px){.modern-filter-bar{border-left:none;border-right:none;border-radius:0;margin:0 -1rem 1.5rem}.modern-filters.expanded{border-left:none;border-right:none;border-radius:0;margin:0 -1rem 1.5rem;padding:1.5rem}}@keyframes shimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}.filter-card.loading{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%) 0 0/200px 100%;animation:1.5s infinite shimmer}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.filter-toggle:before,.filter-badge{animation:none}}@media (prefers-contrast:high){.filter-toggle,.modern-select,.modern-filter-select,.cacao-input{border-width:3px;border-color:#000}.modern-filter-bar,.modern-filters,.filter-card{border:3px solid #000}}.chocolate-grid{padding:0 var(--mobile-padding);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-bottom:3rem;display:grid}.chocolate-card,.chocolate-card *{color:inherit!important;background-color:#fff!important}.chocolate-card{border:1px solid var(--border-color)!important;box-shadow:0 2px 8px #0000000f!important}.loading-container,.no-results-modern{padding:3rem var(--mobile-padding);text-align:center;border-radius:var(--card-radius);margin:1.5rem 0;color:var(--text-dark)!important;background:#fff!important}.floating-filter-toggle,.scroll-to-top{border:2px solid var(--border-color)!important;color:var(--text-dark)!important;background:#fff!important;box-shadow:0 4px 16px #0000001a!important}.browse-page,.browse-header,.modern-filter-bar,.modern-filters,.chocolate-card,.stat-item{background:#fff!important}@media (min-width:480px){.browse-header{padding:1.5rem}.chocolate-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.25rem;padding:0 1.5rem}.modern-filter-bar{padding:1.5rem}}@media (min-width:768px){.browse-page{padding:2rem 0}.browse-header{flex-direction:row;align-items:center;gap:2rem;margin-bottom:2rem}.header-content{text-align:left;flex:1}.header-content h1{font-size:2.25rem}.browse-description{font-size:1.1rem}.quick-stats{flex-direction:column;gap:1rem;min-width:200px;margin-top:0}.stat-item{padding:1.5rem 2rem}.stat-number{font-size:2rem}.chocolate-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem;padding:0 2rem}.filter-controls{flex-wrap:nowrap;gap:1rem}.filter-toggle{flex:0 auto;min-width:140px;max-width:180px}.results-summary{order:initial;justify-content:flex-end;width:auto;margin-bottom:0}}@media (min-width:1024px){.chocolate-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2.5rem}.browse-header{gap:3rem}.header-content h1{font-size:2.5rem}.browse-description{font-size:1.2rem}}.chocolate-card{content-visibility:auto;contain-intrinsic-size:280px 380px}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media print{.modern-filter-bar,.modern-filters,.floating-filter-toggle,.scroll-to-top{display:none!important}.browse-page{background:#fff!important}}