:root{--cat-cream:#f5e9e4;--cat-paper:#fffaf5;--cat-wine:#68152a;--cat-muted:#765d62;--cat-line:#e5d5cf}
#category-screen{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;overflow:auto;background:var(--cat-cream);color:var(--cat-wine)}
#category-screen.hidden{display:none}
.category-header{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;min-height:64px;padding:8px 12px;background:#f8efea;border-bottom:1px solid rgba(104,21,42,.08)}
.category-menu,.category-heart{display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;color:var(--cat-wine);font-size:1.2rem;text-decoration:none}
.category-heart{font-size:1.75rem}
.category-brand{display:grid;justify-items:center;gap:2px}.category-brand img{width:92px;height:auto}.category-brand span{font-size:.43rem;letter-spacing:.2em}
.category-content{width:min(100%,520px);margin:0 auto;padding:12px 12px 88px}
.category-hero{position:relative;display:block;width:100%;height:154px;margin:0;padding:0;overflow:hidden;border:0;border-radius:13px;color:#fffaf5;text-align:left;font:inherit;text-decoration:none;background:#c7b9af;box-shadow:0 8px 20px rgba(104,21,42,.1)}
.category-hero img{width:100%;height:100%;object-fit:cover;object-position:14% 51%;filter:saturate(.78)}
.category-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(56,24,18,.62),rgba(56,24,18,.06) 72%)}
.category-hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding:18px 22px}.category-hero-copy strong{font-family:Georgia,serif;font-size:1.45rem;line-height:1.02;font-weight:400}.category-hero-copy b{display:flex;align-items:center;gap:12px;padding:8px 13px;border:1px solid rgba(255,250,245,.72);border-radius:999px;background:var(--cat-wine);font-size:.57rem;letter-spacing:.08em}.category-hero-copy i{font-size:1rem;font-style:normal;line-height:.5}
.category-heading{display:flex;align-items:baseline;justify-content:space-between;padding:18px 3px 8px}.category-heading p{margin:0;font-size:.68rem;font-weight:700;letter-spacing:.13em}.category-heading span{font-size:.72rem;color:var(--cat-muted)}
.category-list{display:grid;gap:7px}.category-option{display:grid;grid-template-columns:62px 1fr 26px;align-items:center;min-height:64px;padding:0;border:1px solid rgba(104,21,42,.08);border-radius:12px;overflow:hidden;background:rgba(255,250,245,.72);color:var(--cat-wine);text-align:left;box-shadow:0 2px 8px rgba(104,21,42,.03)}.category-option img{width:62px;height:64px;object-fit:contain;background:#ead8d3}.category-option span{display:grid;gap:3px;padding:0 11px}.category-option strong{font-size:.68rem;letter-spacing:.08em}.category-option small{font-size:.75rem;color:var(--cat-muted)}.category-option>b{font-size:1.35rem;font-weight:400;color:var(--cat-muted)}
.category-bottom-nav{position:fixed;z-index:2;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(4,1fr);min-height:68px;padding:7px 8px max(7px,env(safe-area-inset-bottom));border-top:1px solid rgba(104,21,42,.1);background:rgba(255,250,245,.96);box-shadow:0 -8px 24px rgba(104,21,42,.06)}.category-bottom-nav a,.category-bottom-nav>span{display:grid;place-items:center;gap:2px;color:var(--cat-muted);font-size:.63rem;text-decoration:none}.category-bottom-nav span span{font-size:1.2rem;color:var(--cat-wine)}.category-bottom-nav .is-active{color:var(--cat-wine);font-weight:600}
@media(min-width:700px){.category-content{padding-top:24px}.category-hero{height:190px}.category-list{grid-template-columns:repeat(2,1fr)}.category-bottom-nav{left:50%;width:min(520px,100%);transform:translateX(-50%);border-radius:15px 15px 0 0}}