.siteHeader{position:sticky;top:0;z-index:1000;padding:0;background:#f8f7f5;color:#211a1a;border-bottom:1px solid #d9d5d1;box-shadow:0 8px 24px #211a1a0f}
.siteHeader .siteNav{max-width:1440px;margin:auto;padding:0 clamp(20px,4vw,60px);min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.siteHeader .siteLogo{font:700 1.65rem Georgia,serif;letter-spacing:.19em;text-decoration:none;color:inherit;white-space:nowrap;position:relative;padding-bottom:8px}
.siteHeader .siteLogo::after{content:'';position:absolute;left:0;bottom:0;width:38px;height:2px;background:#71343d}
.siteHeader .siteLinks{display:flex;align-items:center;gap:26px;margin-left:auto;font:700 .78rem Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.siteHeader a{color:inherit;text-decoration:none}
.siteHeader .siteLinks>a,.siteHeader summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.siteHeader summary{list-style:none;gap:8px}
.siteHeader summary::-webkit-details-marker{display:none}
.siteHeader summary::after{content:'⌄';font-size:.9em;color:#71343d}
.siteHeader details[open]>summary::after{transform:rotate(180deg)}
.siteHeader a:not(.siteLogo):hover,.siteHeader summary:hover{text-decoration:underline;text-underline-offset:5px}
.siteHeader .siteLogo:hover{text-decoration:none}
.siteHeader a:focus-visible,.siteHeader summary:focus-visible,.siteHeader select:focus-visible{outline:2px solid #71343d;outline-offset:3px}
.siteNavMenu{position:relative}
.siteNavPanel{position:absolute;top:100%;right:0;width:260px;max-width:calc(100vw - 40px);max-height:calc(100dvh - 130px);overflow-y:auto;background:#fff;border:1px solid #b6aaa4;box-shadow:0 12px 28px #211a1a24;padding:8px;letter-spacing:.02em;text-transform:none;font-size:.82rem;font-weight:400;line-height:1.35}
.siteHeader .siteNavPanel a,.siteHeader .siteNavPanel summary{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;min-height:42px;white-space:normal}
.siteHeader .siteNavPanel a:hover,.siteHeader .siteNavPanel summary:hover{background:#eee9e4;text-decoration:none}
.siteHeader .siteNavPanel>details>summary{font-weight:700}
.siteNavChildren{margin-left:12px;border-left:1px solid #e4dbd6;padding-left:4px}
.siteHeader .siteNavAll{color:#71343d;border-bottom:1px solid #eee9e4;margin-bottom:4px;font-weight:700}
.siteHeader select{border:1px solid #b6aaa4;background:transparent;color:inherit;padding:8px;font:inherit;max-width:64px}
@media(max-width:760px){.siteHeader .siteNav{flex-wrap:wrap;gap:6px;padding-top:12px;padding-bottom:10px}.siteHeader .siteLogo{font-size:1.3rem;order:1}.siteHeader .siteNav>select{order:2}.siteHeader .siteLinks{order:3;width:100%;justify-content:space-between;gap:8px;font-size:.65rem}.siteNavPanel{max-height:calc(100dvh - 165px)}.siteNavMenu:first-child>.siteNavPanel{left:0;right:auto}.siteNavMenu:nth-child(2)>.siteNavPanel{left:50%;right:auto;transform:translateX(-40%)}}
@media(max-width:380px){.siteHeader .siteLinks{gap:6px;font-size:.58rem}.siteHeader select{padding:6px}.siteHeader .siteNav{padding-left:16px;padding-right:16px}}
/* Anchor destinations remain below the sticky navigation at every breakpoint. */
#koleksi,#how-to-order,#contact,#customer-care,.legacyOrderAnchor{scroll-margin-top:var(--site-header-offset,120px)}
.legacyOrderAnchor{display:block;height:0}
/* Desktop category branches open to the side; touch layouts keep tap disclosures. */
@media(min-width:761px) and (hover:hover) and (pointer:fine){
 .siteNavMenu:has(.siteNavBranch)>.siteNavPanel{width:210px;max-height:none;overflow:visible;transform:translateX(var(--menu-shift,0px))}
 .siteNavPanel .siteNavBranch{position:relative}
 .siteNavPanel .siteNavBranch>.siteNavChildren{position:absolute;left:100%;top:-9px;width:230px;margin:0;padding:8px;background:#fff;border:1px solid #b6aaa4;box-shadow:0 12px 28px #211a1a24;z-index:2}
 .siteHeader .siteNavBranch>summary::after{content:'›';font-size:1.2em;transform:none}
 .siteHeader .siteNavBranch[open]>summary{background:#eee9e4}
 .siteHeader .siteNavBranch[open]>summary::after{transform:none}
 .siteNavPanel .siteNavChildren a{font-size:.875rem;line-height:1.4}
}
.siteFooter#contact{min-height:calc(100svh - var(--site-header-offset,120px))}
@media(max-width:1100px) and (min-width:761px){.siteHeader .siteLinks{gap:16px}.siteHeader .siteNav{gap:18px}.siteHeader .siteLogo{font-size:1.45rem}}
@media(max-width:950px){.siteHeader .siteNav{flex-wrap:wrap;gap:6px;padding-top:12px;padding-bottom:10px}.siteHeader .siteLogo{order:1}.siteHeader .siteNav>select{order:2;margin-left:auto}.siteHeader .siteLinks{order:3;width:100%;margin-left:0;justify-content:space-between;gap:16px;font-size:.78rem}}
@media(max-width:600px){.siteHeader .siteLinks{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px;font-size:.75rem;letter-spacing:.07em}.siteHeader .siteLinks>a,.siteHeader .siteLinks>details{min-width:0}.siteHeader .siteNavPanel{max-height:calc(100dvh - 195px)}.siteHeader .siteNavMenu:nth-child(2)>.siteNavPanel{left:50%;transform:translateX(-50%)}}
.browseFilters{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}.browseFilters a{padding:10px 16px;border:1px solid #b6aaa4;text-decoration:none;font-size:14px}.browseFilters a[aria-current=page]{background:#71343d;color:#fff;border-color:#71343d}